了解IT技术
老九你最好的选择

HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图)


3d旋转图:主要用css3中transform属性中的rotate,translate;以及用来做舞台效果的 perspective: 800px;(景深)和使立方体呈3d效果展示的transform-style:preserve-3d来实现;
全屏的雪花飘落用原生js来实现(随机的大小,透明度的变化等),有详细注释;
html5主要是实现背景音乐和头部的字体卷动效果。
< audio src=“music.mp3” hidden=“true” loop=“true” preload=“auto”>< /audio> 或者< embed src=“music.mp3” type=””/>

html部分:

<body>
    <div class="top">
        <marquee behavior="alternate" direction="left">时光不老,我们不散</marquee>
    </div>
    <div class="box" id="_box">
        <div class="pic" id="_pic">
            <ul id="_ul">              
                <li><img class="active" src="images/wm.jpg" alt=""></li>
                <li><img class="active" src="images/6.png" alt=""></li>
                <li><img src="images/2.png" alt=""></li>
                <li><img class="active" src="images/w.jpg" alt=""></li>
               <li><img src="images/4.png" alt=""></li>
                <li><img class="active"src="images/xin1.png" alt=""></li>   
            </ul>
        </div>
    </div>
    <div class="text"></div> 
    <!-- <audio src="music.mp3" hidden="true" loop="true" preload="auto"></audio> -->
    <embed src="music.mp3" type=""/>
</body>

css部分

   <style>
        *{
            padding:0;
            margin: 0;
            list-style: none;
        }
        img{
            width: 240px;
            height: 240px;
        }
        img.active{
            width: 200px;
            height: 200px;
            border-radius:   60px 60px 150px 150px;
        }
        html,body{
            width:100%;
            height: 100%;
        }
        body{
            background: url('images/3.jpg') no-repeat;
            background-size:cover;
            overflow: hidden;
        }
        .top{
            width: 400px;
            height: 50px;
            margin: 60px auto;
            font-size: 30px;
            font-family: "华文行楷";
            color: #fff;
        }
        .top marquee{
            margin-top: -80px;
        } 
        .box {
            width: 310px;
            height: 260px;
            margin: 20px auto;
            /* 景深:离视线的距离 */
            perspective: 800px;
        }
        .box .pic{
            width: 100%;
            height: 100%;
            position: relative;
            /* 设置3d环境 */
            transform-style:preserve-3d;
            animation: play 10s linear infinite;
        }
        @keyframes play {
            from{
                transform: rotateY(0);
            }
            to{
                transform: rotateY(360deg);
            }
        }
        .box .pic li{
            position: absolute;
            top: 0;
            left: 0;
        }
        .text {
            width: 500px;
            height: 200px;
            margin: 0 auto;
            font-size:22px;
            color: #6fade1;
            font-family: "华文行楷";
        }
        .xh {
            animation: snow 15s infinite linear;
        }
        @keyframes snow{
            0%{
                transform: rotate(0);
            }
            50%{
                opacity: 0.4;
            }
            100%{
                transform: rotate(360deg);
                opacity: 0.1;
            }
            
        }
    </style>

js部分

<script>
    // 获得元素
    var box = document.getElementById('_box');
    var pic = document.getElementById('_pic');
    var ul = document.getElementById('_ul');
    var text = document.getElementsByClassName('text')[0];
    var lis = ul.children;
    var deg = 360 / lis.length;
    var  num = 0;
    var string =  "朋友之间不需要谢谢,也不需要对不起。因为真正的友谊不是谢谢也不是对不起,它只是静静的,告诉你:我还在!";
    // 让li元素呈圈形式展开
    for(var i = 0;i < lis.length ;i++)
    {
        lis[i].style.transform = "rotateY("+deg*i+"deg) translateZ(216px)";
    }
    // 让文字一个一个的出现在屏幕上
    show();
    function  show(){
    var timer = null;
    text.innerHTML += string.charAt(num);
    num++;
    clearInterval(timer);
    timer = setTimeout(show,200);
    if(num == string.length)
    {
        clearInterval(timer);
    }
   }
   // 制作雪花特效
   var minsize = 5;// 最小的雪花
   var maxsize = 50;// 最大的雪花
   var delay = 100;// 生成雪花的时间间隔
   var snowColor = "#fff";// 雪花颜色
   var snowDiv = document.createElement('div');// 生成一个雪花
   snowDiv.className = "xh";
   snowDiv.style.position = "absolute";
   snowDiv.style.left = '0';
   snowDiv.style.top = "0";
   snowDiv.style.color = snowColor;
   snowDiv.innerHTML = "❉";
   var dHeight = document.documentElement.clientHeight;// 检测可视区的高度;
   var dWidth = document.documentElement.clientWidth;// 检测可视区的宽度
   setInterval(function(){
        var snowSize = minsize + Math.random()*maxsize;// 随机雪花的大小
        var startLeft = Math.random()*dWidth;// 雪花随机出现/停止的left值
        var stopLeft= Math.random()*dWidth;// 雪花随机出现/停止的left值
        var startOpacity = 0.7 + Math.random()*0.3;// 随机的透明度
        var stopHeight = dHeight -100;// 雪花停止的高度
        var speed = 3 +Math.random() *5 ;// 雪花飘落过程的速度
        var div = snowDiv.cloneNode(true);
        div.style.left = startLeft + 'px';
        div.style.opacity = startOpacity;
        div.style.fontSize = snowSize + 'px';        
        document.body.appendChild(div);
        animate(div,speed,stopHeight,stopLeft );
   },delay);

   
    function animate(obj,speed,stopHeight,stopLeft){
         clearInterval(obj.timer);
         obj.timer = setInterval(function(){
             obj.style.top = speed + obj.offsetTop + 'px';
            if(obj.offsetTop >= stopHeight)
            {
             clearInterval(obj.timer);
             document.body.removeChild(obj);// 到达设置的高度就移除
             }
         },50);    
    }
</script>
赞(2) 打赏
未经允许不得转载:老九IT技术网 » HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

老九为IT技术人提供最全面的IT资讯和交流互动

友情链接广告合作