HTML5七夕情人节表白网页制作 __浪漫空中散落的花瓣3D相册__ HTML+CSS+JavaScript

Posted @代码搬运工-web领域

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5七夕情人节表白网页制作 __浪漫空中散落的花瓣3D相册__ HTML+CSS+JavaScript相关的知识，希望对你有一定的参考价值。

html5七夕情人节表白网页制作 ❤浪漫空中散落的花瓣3D相册❤ HTML+CSS+javascript

这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站，可以任意修改和使用，源码已上传，演示网址如下。

🧡文章末尾-已经附上源码下载地址

🧡作者主页-更多源码

🧡七夕情人节专栏文章

作品介绍

1.网页作品简介 ：基于 HTML+CSS+JavaScript 制作七夕情人节表白网页, 生日祝福, 七夕告白, 求婚, 浪漫爱情3D相册,炫酷代码 ,已经兼容手机端和电脑端, 快来制作一款高端的表白网页送(他/她)生日祝福网页,制作修改简单, 需替换图片和文字即可.可自行更换背景音乐。

2.网页作品编辑：任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ ）均可修改网页。

文章目录

一、作品展示(已兼容手机端/电脑端)

二、文件目录

三、代码实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>html5+canvas烂漫空中散落的花瓣3D相册动画特效</title>
    <meta name="description" content="Change OR Die" />
    <script src="js/jquery.min.js"></script>
    <link type="text/css" href="./css/style.css" rel="stylesheet" />
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
        list-style-type: none;
      }
      a,
      img {
        border: 0;
      }
      body {
        font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
      }
      /* 相册css */
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
    </style>
  </head>

  <body>
    <audio src="music/4.mp3" autoplay="autoplay" loop="loop"></audio>
    <canvas id="sakura"></canvas>
    <div class="box">
      <ul class="minbox">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <ol class="maxbox">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ol>
    </div>
    <!-- sakura shader -->
    <script id="sakura_point_vsh" type="x-shader/x_vertex">
      uniform mat4 uProjection;
      uniform mat4 uModelview;
      uniform vec3 uResolution;
      uniform vec3 uOffset;
      uniform vec3 uDOF;  //x:focus distance, y:focus radius, z:max radius
      uniform vec3 uFade; //x:start distance, y:half distance, z:near fade start

      attribute vec3 aPosition;
      attribute vec3 aEuler;
      attribute vec2 aMisc; //x:size, y:fade

      varying vec3 pposition;
      varying float psize;
      varying float palpha;
      varying float pdist;

      //varying mat3 rotMat;
      varying vec3 normX;
      varying vec3 normY;
      varying vec3 normZ;
      varying vec3 normal;

      varying float diffuse;
      varying float specular;
      varying float rstop;
      varying float distancefade;

      void main(void) {
          // Projection is based on vertical angle
          vec4 pos = uModelview * vec4(aPosition + uOffset, 1.0);
          gl_Position = uProjection * pos;
          gl_PointSize = aMisc.x * uProjection[1][1] / -pos.z * uResolution.y * 0.5;

          pposition = pos.xyz;
          psize = aMisc.x;
          pdist = length(pos.xyz);
          palpha = smoothstep(0.0, 1.0, (pdist - 0.1) / uFade.z);

          vec3 elrsn = sin(aEuler);
          vec3 elrcs = cos(aEuler);
          mat3 rotx = mat3(
              1.0, 0.0, 0.0,
              0.0, elrcs.x, elrsn.x,
              0.0, -elrsn.x, elrcs.x
          );
          mat3 roty = mat3(
              elrcs.y, 0.0, -elrsn.y,
              0.0, 1.0, 0.0,
              elrsn.y, 0.0, elrcs.y
          );
          mat3 rotz = mat3(
              elrcs.z, elrsn.z, 0.0,
              -elrsn.z, elrcs.z, 0.0,
              0.0, 0.0, 1.0
          );
          mat3 rotmat = rotx * roty * rotz;
          normal = rotmat[2];

          mat3 trrotm = mat3(
              rotmat[0][0], rotmat[1][0], rotmat[2][0],
              rotmat[0][1], rotmat[1][1], rotmat[2][1],
              rotmat[0][2], rotmat[1][2], rotmat[2][2]
          );
          normX = trrotm[0];
          normY = trrotm[1];
          normZ = trrotm[2];

          const vec3 lit = vec3(0.6917144638660746, 0.6917144638660746, -0.20751433915982237);

          float tmpdfs = dot(lit, normal);
          if(tmpdfs < 0.0) {
              normal = -normal;
              tmpdfs = dot(lit, normal);
          }
          diffuse = 0.4 + tmpdfs;

          vec3 eyev = normalize(-pos.xyz);
          if(dot(eyev, normal) > 0.0) {
              vec3 hv = normalize(eyev + lit);
              specular = pow(max(dot(hv, normal), 0.0), 20.0);
          }
          else {
              specular = 0.0;
          }

          rstop = clamp((abs(pdist - uDOF.x) - uDOF.y) / uDOF.z, 0.0, 1.0);
          rstop = pow(rstop, 0.5);
          //-0.69315 = ln(0.5)
          distancefade = min(1.0, exp((uFade.x - pdist) * 0.69315 / uFade.y));
      }
    </script>
    <script id="sakura_point_fsh" type="x-shader/x_fragment">
      #ifdef GL_ES
      //precision mediump float;
      precision highp float;
      #endif

      uniform vec3 uDOF;  //x:focus distance, y:focus radius, z:max radius
      uniform vec3 uFade; //x:start distance, y:half distance, z:near fade start

      const vec3 fadeCol = vec3(0.08, 0.03, 0.06);

      varying vec3 pposition;
      varying float psize;
      varying float palpha;
      varying float pdist;

      //varying mat3 rotMat;

    <!-- effects -->
    <script id="fx_common_vsh" type="x-shader/x_vertex">
      uniform vec3 uResolution;
      attribute vec2 aPosition;

      varying vec2 texCoord;
      varying vec2 screenCoord;

      void main(void) {
          gl_Position = vec4(aPosition, 0.0, 1.0);
          texCoord = aPosition.xy * 0.5 + vec2(0.5, 0.5);
          screenCoord = aPosition.xy * vec2(uResolution.z, 1.0);
      }
    </script>
    <script id="bg_fsh" type="x-shader/x_fragment">
      #ifdef GL_ES
      //precision mediump float;
      precision highp float;
      #endif

      uniform vec2 uTimes;

      varying vec2 texCoord;
      varying vec2 screenCoord;

      void main(void) {
          vec3 col;
          float c;
          vec2 tmpv = texCoord * vec2(0.8, 1.0) - vec2(0.95, 1.0);
          c = exp(-pow(length(tmpv) * 1.8, 2.0));
          col = mix(vec3(0.02, 0.0, 0.03), vec3(0.96, 0.98, 1.0) * 1.5, c);
          gl_FragColor = vec4(col * 0.5, 1.0);
      }
    </script>
    <script id="fx_brightbuf_fsh" type="x-shader/x_fragment">
      #ifdef GL_ES
      //precision mediump float;
      precision highp float;
      #endif
      uniform sampler2D uSrc;
      uniform vec2 uDelta;

      varying vec2 texCoord;
      varying vec2 screenCoord;

      void main(void) {
          vec4 col = texture2D(uSrc, texCoord);
          gl_FragColor = vec4(col.rgb * 2.0 - vec3(0.5), 1.0);
      }
    </script>
    <script id="fx_dirblur_r4_fsh" type="x-shader/x_fragment">
      #ifdef GL_ES
      //precision mediump float;
      precision highp float;
      #endif
      uniform sampler2D uSrc;
      uniform vec2 uDelta;
      uniform vec4 uBlurDir; //dir(x, y), stride(z, w)

      varying vec2 texCoord;
      varying vec2 screenCoord;

      void main(void) {
          vec4 col = texture2D(uSrc, texCoord);
          col = col + texture2D(uSrc, texCoord + uBlurDir.xy * uDelta);
          col = col + texture2D(uSrc, texCoord - uBlurDir.xy * uDelta);
          col = col + texture2D(uSrc, texCoord + (uBlurDir.xy + uBlurDir.zw) * uDelta);
          col = col + texture2D(uSrc, texCoord - (uBlurDir.xy + uBlurDir.zw) * uDelta);
          gl_FragColor = col / 5.0;
      }
    </script>
    <!-- effect fragment shader template -->
    <script id="fx_common_fsh" type="x-shader/x_fragment">
      #ifdef GL_ES
    * (vec4(1.0) + srccol);
          col *= smoothstep(1.0, 0.0, pow(length((texCoord - vec2(0.5)) * 2.0), 1.2) * 0.5);
          col = pow(col, vec4(0.45454545454545)); //(1.0 / 2.2)

          gl_FragColor = vec4(col.rgb, 1.0);
          gl_FragColor.a = 1.0;
      }
    </script>

    <script src="js/index.js"></script>
  </body>
</html>

四、学习资料

web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站

五、源码下载

【百度网盘-完整源码下载地址↓】

链接：https://pan.baidu.com/s/1UdFzRE6mEKC5D1xALTMbYw
提取码：8888

六、更多源码

❤100款表白网页演示地址

❤100款表白网页在线视频演示

以上是关于HTML5七夕情人节表白网页制作 __浪漫空中散落的花瓣3D相册__ HTML+CSS+JavaScript的主要内容，如果未能解决你的问题，请参考以下文章

HTML+CSS+JS520告白表白模板在线制作(七夕情人节表白网页代码)

HTML5七夕情人节表白网页制作——蓝色梦幻海洋3D相册—— HTML+CSS+JavaScript

520七夕情人节告白网页代码—浪漫3D相册

520七夕情人节告白网页代码—浪漫3D相册

我是如何俘虏学姐芳心~❤给她放一场浪漫的烟花3D相册❤~(520情人节/七夕情人节/生日快乐/烟花告白/程序员表白专属)

HTML+CSS+JS制作3D动态相册表白网站代码程序员专属情人节表白网站