HTML 制作 3D 樱花漫天飞舞及浪漫信封

<div id="jsi-cherry-container"></div> <section class="container" id="contact" >        <form class="flip">                <div class="front">    <h2>To  Ming</h2>                        <a id="flip2back" href="#">Flip</a>                </div>                <div id="content" class="back">                        <div id="letter">                                <div class="container">                                        <div class="flip">                                                <div class="front"></div>                                                <div class="back">                        <p class="letter"></p>                         <a id="close" href="#">Close</a>                                                                </div>                                                                    </div>                                </div>                        </div>                        <div id="top">                                <a id="flip" href="#contact">Flip</a>                        </div>                        <div id="lid" class="container">                                <div class="flip">                                          <div class="front">                                                <a id="open" href="#content"><span></span></a>                                        </div>                                                                <div class="back"></div>                                </div>                        </div>                </div>        </form></section>
<div id="footer">        <audio id="music2" preload="auto" loop></audio>        <a id="music_btn2" href="javascript:playPause();"></a></div>

#letter {  background: #fafafa;  width: 90%;  height: 95%;  position: absolute;  left: 5%;  top: 5%;  z-index: 0;  -webkit-transition: .5s .5s;  -moz-transition: .5s .5s;  -o-transition: 0s 0s;  transition: 0s 0s; }
#content:target #letter {  top: -40%;  -o-transition: .5s .5s;  transition: .5s .5s; }
#letter .container {  position: absolute;  width: 100%;  /*height: 50%;*/  -webkit-perspective: 800px;  -moz-perspective: 800px;  perspective: 800px;  top: 0;  left: 0;  -webkit-transition: 0s 0s;  -moz-transition: 0s 0s;  transition: 0s 0s;  z-index: 1; }
#letter .flip {  width: 100%;  height: 100%; }  #letter .flip {    position: absolute;    -webkit-transform-style: preserve-3d;    -moz-transform-style: preserve-3d;  transform-style: preserve-3d;      -webkit-transition: -webkit-transform 0.5s 0s;    -moz-transition: -moz-transform 0.5s 0s;  transition: -moz-transform 0.5s 0s;      -webkit-transform-origin: left top;    -moz-transform-origin: left top;  transform-origin: left top; }  #letter .flip > .front, #letter .flip > .back {    position: absolute;    width: 100%;    height: 100%;    -webkit-backface-visibility: hidden;    -moz-backface-visibility: hidden;  backface-visibility: hidden; }  #letter .flip > .back {    -webkit-transform: rotateX(180deg);    -moz-transform: rotateX(180deg);  transform: rotateX(180deg); }  #content:target #letter .flip {    -webkit-transform: rotateX(180deg);    -moz-transform: rotateX(180deg);  transform: rotateX(180deg);      -webkit-transition-duration: 0.5s;    -moz-transition-duration: 0.5s;  transition-duration: 0.5s;      -webkit-transition-delay: 1s;    -moz-transition-delay: 1s;  transition-delay: 1s; }

var aparted = false;$("#open").click(function(){  if(!aparted)  {    var typed = new Typed('.letter', {      strings: ["^1000Dear&nbsp;&nbsp;Ming",         "M^200ing<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;夜には^300いつも^200寒いよね、^600でも、^600手を^200繋いでいると、^600暖か^200くなるよ！<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;どんなに^300寒い夜も、^600君と^300二人でいれば、^600ちっとも^300寒くない！<br><br><p style='float:right; display:block; width:80px;'>^1000H^200ao</p>"],      typeSpeed: 100,      backSpeed: 50    });      $('#open').find("span").eq(0).css('background-position', "0 -150px");    aparted = true;    var music = document.getElementById('music2');        if (music.paused)    {      music.play();      $('#music_btn2').css("opacity", "1");     }  }  });
function playPause() {    var music = document.getElementById('music2');    var music_btn = $('#music_btn2');    if (music.paused){        music.play();  music_btn.css("opacity", "1");     }    else{        music.pause();  music_btn.css("opacity", "0.2");     }  }window.onload = function () {    var currentUrl = window.location.href;  var firstIndex = currentUrl.indexOf("#");    if (firstIndex <= 0) window.location.href = currentUrl + "#contact";  $('#music2').attr('src', bgmsrc);  document.addEventListener('touchstart',function (event) { if(event.touches.length > 1) event.preventDefault(); });  var lastTouchEnd = 0;  document.addEventListener('touchend',function (event) {    var now = (new Date()).getTime();    if(now - lastTouchEnd <= 300) event.preventDefault();    lastTouchEnd = now;  }, false);  document.addEventListener('gesturestart', function (event) { event.preventDefault(); });  $('body').css('opacity', '1');  $('#jsi-cherry-container').css('z-index', '-99');}

<canvas id="sakura"></canvas><div class="btnbg"></div><footer class="page-footer"><span>made by </span><a href="http://haiyong.site/moyu" target="_blank"><img class="touxiang"  src="http://haiyong.site/wp-content/uploads/2021/07/cropped-59255587-1-192x192.jpg" alt="George Martsoukos logo"></a></footer>

body {    padding:0;    margin:0;    overflow:hidden;  height: 600px;}canvas {    padding:0;    margin:0;}div.btnbg {    position:fixed;    left:0;    top:0;}.page-footer {  position: fixed;  right: 0;  bottom: 20px;  display: flex;  align-items: center;  padding: 5px;  color: black;  background: rgba(255, 255, 255, 0.65);}
.page-footer a {  display: flex;  margin-left: 4px;}.touxiang{  width:24px;  height:24px;}

<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 radiusuniform 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>