关于html5:HTML制作3D樱花漫天飞舞及浪漫信封

🌊 作者主页:海拥
🌊 作者简介:🏆CSDN全栈畛域优质创作者、🥇HDZ外围组成员
🌊 粉丝福利:👉 粉丝群 👈每周送6-9本书,不定期送各种小礼品(往期获奖记录)

视频及在线演示

https://www.bilibili.com/vide…

💕浪漫信封: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&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');
}

演示图片

💕浪漫信封在线演示地址: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(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>

演示图片

💌3D樱花漫天飞舞在线演示地址:http://haiyong.site/yinghua

HTML5制作3D樱花漫天飞舞及浪漫信封 [代码]

如果你在复制上述代码时遇到困难,能够通过上面的形式来创立此我的项目(应用 JavaScript 的 3D樱花漫天飞舞及浪漫信封)

有很多初学者无奈将所有这些代码放在一起。对于他们,我曾经把所有的代码放在一起了。关注公众号【海拥】回复【樱花】获取源码。

心愿通过本教程,你也能够应用 HTML5制作3D樱花漫天飞舞及浪漫信封。

作者立志打造一个领有100个小游戏/工具的摸鱼网站,更新进度:50/100

我曾经写了很长一段时间的技术博客,并且次要通过思否发表,这是我的一篇对于如何应用 HTML5制作3D樱花漫天飞舞及浪漫信封。我喜爱通过文章分享技术与高兴。你能够拜访我的博客: https://segmentfault.com/u/haiyong 以理解更多信息。心愿你们会喜爱!😊

💌 欢送大家在评论区提出意见和倡议!💌

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年50元

阿里云限时活动-2核2G-5M带宽-60G SSD-1000G月流量 ,特惠价99元/年(原价1234.2元/年,可以直接买3年),速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表评论

您的电子邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据