HTML制作3D樱花漫天飞舞及浪漫信封
视频及在线演示
浪漫信封：http://haiyong.site/demo/eluvletter
3D樱花漫天飞舞：https://haiyong.site/demo/yinghua.html
公众号【海拥】回复【樱花】获取完整源码!
浪漫信封
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>
1234567891011121314151617181920212223242526272829303132333435363738 部分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; }
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071 letter.jsvar 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'); }
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 演示图片浪漫信封在线演示地址：http://haiyong.site/demo/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> 123456789 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; }
12345678910111213141516171819202122232425262728293031323334 部分 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(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>
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192 演示图片3D樱花漫天飞舞在线演示地址：https://haiyong.site/demo/yinghua.html
HTML5制作3D樱花漫天飞舞及浪漫信封 [代码]
如果你在复制上述代码时遇到困难，可以通过下面的方式来创建此项目（使用 JavaScript 的 3D樱花漫天飞舞及浪漫信封）
有很多初学者无法将所有这些代码放在一起。对于他们，我已经把所有的代码放在一起了。关注公众号【海拥】回复【樱花】获取源码。
希望通过本教程，你也可以使用 HTML5制作3D樱花漫天飞舞及浪漫信封。
作者立志打造一个拥有100个小游戏/工具的摸鱼网站，更新进度：50/100
我已经写了很长一段时间的技术博客，并且主要通过CSDN发表，这是我的一篇关于如何使用 HTML5制作3D樱花漫天飞舞及浪漫信封。我喜欢通过文章分享技术与快乐。你可以访问我的博客： https://haiyong.blog.csdn.net/ 以了解更多信息。希望你们会喜欢！
欢迎大家在评论区提出意见和建议！
相关知识
炫酷3D相册❤ 520七夕情人节表白网页制作❤(HTML+CSS+JavaScript)
春已至，只想陪你看漫天樱花飞舞！
《520七夕情人节表白礼物》❤520表白星空漫漫3D相册❤(HTML+CSS+JavaScript)
HTML+CSS+JavaScript 制作电子版的烂漫爱心表白动画(程序员也是很烂漫的)
一行代码教你七夕情人节如何告白❤—动漫3D相册(音乐+文字)HTML+CSS+JavaScript
樱花浪漫作文650字
樱花浪漫短句
关于樱花的浪漫语句有哪些 关于樱花的浪漫句子精选
HTML5七夕情人节表白网页制作【浪漫森林落叶钢琴紫色3D相册】HTML+CSS+JavaScript
关于樱花的浪漫语句有哪些
网址: HTML制作3D樱花漫天飞舞及浪漫信封 https://m.huajiangbk.com/newsview1193975.html
| 上一篇: 浪漫樱花 (吧啦吧啦樱之花 拉拉 |
下一篇: 浪漫樱花 浪漫樱花 |
