HTML制作3D樱花漫天飞舞及浪漫信封
Posted 海拥✘
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML制作3D樱花漫天飞舞及浪漫信封相关的知识，希望对你有一定的参考价值。
🌊 作者主页：海拥
🌊 作者简介：🏆CSDN全栈领域优质创作者、🥇HDZ核心组成员
🌊 粉丝福利：👉 粉丝群 👈每周送6-9本书，不定期送各种小礼品（往期获奖记录）
视频及在线演示
html5制作3D樱花漫天飞舞及浪漫信封
💕浪漫信封：http://haiyong.site/eluvletter
💌3D樱花漫天飞舞：http://haiyong.site/yinghua
🌊公众号【海拥】回复【樱花】获取完整源码!
💕 浪漫信封
HTML 内容
<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>
部分CSS
#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;
letter.js
var aparted = false;
$("#open").click(function()
if(!aparted)
var typed = new Typed('.letter',
strings: ["^1000Dear Ming",
"M^200ing<br><br> 夜には^300いつも^200寒いよね、^600でも、^600手を^200繋いでいると、^600暖か^200くなるよ！<br> どんなに^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');
演示图片
💕浪漫信封在线演示地址：http://haiyong.site/eluvletter
💌 3D樱花漫天飞舞
HTML 内容
<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>
CSS 内容
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;
部分 JS 内容
<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(以上是关于HTML制作3D樱花漫天飞舞及浪漫信封的主要内容，如果未能解决你的问题，请参考以下文章
我是如何用一行代码表白学妹~❤520情人节送女朋友的3D樱花雨相册礼物❤~(程序员表白专属)