飘落的闪光

前端入坑纪 07

转瞬又是周三，单休的宝宝表示再干三天，又有得休息了。怎么感觉有点自我安慰的赶脚？

今天把项目中一个飘飘的效果做好了，就是代码真有点长。讲真，这个效果在手机上确实有点卡，也不晓得是不是我目前水平的关系。唉，漫漫web前端路，不知其所止......

某时刻截图

一等大事：项目链接

HTML 结构

    <div class="wrap">
       ![](spark.png)
       ![](spark.png)
       ![](spark.png)
       ![](spark.png)
       ![](spark.png)
       ![](spark.png)
       ![](spark.png)
       ![](spark.png)
    </div>

页面里就是8张图片，不晓得为什么图片标签发布后全变了。大家脑补都是html 的图片标签

CSS 结构

        html,
        body {
            height: 100%
        }
        
        * {
            margin: 0;
            padding: 0
        }
        
        .wrap {
            background-color: #2F67A8;
            height: 100%
        }
        
        .sparks {
            height: 50px;
            transition-property: top left;
            transition: 5s linear;
            position: fixed;
        }
        
        div.wrap img.sparks:nth-child(1) {
            animation: rots 5s linear infinite alternate .4s
        }
        
        div.wrap img.sparks:nth-child(2) {
            animation: rots 5s linear infinite alternate .7s
        }
        
        div.wrap img.sparks:nth-child(3) {
            animation: rots1 5s linear infinite alternate 1.1s
        }
        
        div.wrap img.sparks:nth-child(4) {
            animation: rots1 5s linear infinite alternate 1.7s
        }
        
        div.wrap img.sparks:nth-child(5) {
            animation: rots 5s linear infinite alternate .6s
        }
        
        div.wrap img.sparks:nth-child(6) {
            animation: rots 5s linear infinite alternate .35s
        }
        
        div.wrap img.sparks:nth-child(7) {
            animation: rots1 5s linear infinite alternate 1.1s
        }
        
        div.wrap img.sparks:nth-child(8) {
            animation: rots1 5s linear infinite alternate 1.3s
        }
        
        @keyframes rots {
            0% {
                transform: rotateZ(38deg)
            }
            50% {
                transform: rotateZ(0)
            }
            100% {
                transform: rotateZ(-38deg)
            }
        }
        
        @keyframes rots1 {
            0% {
                transform: rotateZ(-58deg)
            }
            50% {
                transform: rotateZ(0)
            }
            100% {
                transform: rotateZ(58deg)
            }
        }

css 给每个图片添加不同的延时，不同的转角度数，我这只写了两个度数效果

简单示意

JavaScript 结构

        var winH = window.innerHeight,
            winW = window.innerWidth,
            i = j = 0,
            Otarget = document.getElementsByClassName("sparks");
        // 变换元素的位置坐标
        function chanPos(aimer, a, b) {
            Otarget[aimer].style.left = a + "px";
            Otarget[aimer].style.top = b + "px";
        }
        // a到b之间的整数
        function ranges(a, b) {
            return Math.floor(Math.random() * (b - a) + a)
        }
        // 整体效果
        function sparkMov(aimer) {
            // 获取元素对象的当前位置属性
            var lefta = parseInt(Otarget[aimer].style.left),
                topb = parseInt(Otarget[aimer].style.top);
            // 重启过渡的效果
            Otarget[aimer].style.transitionProperty = "all";
            // 用三元表达式使50%机率加减随机数，决定了向左还是向右移动
            var movPos = ranges(1, 10) < 5 ? ranges(20, 70) : (-ranges(20, 70));
            //元素left位置的随机取值，以及超过屏幕宽度时，减小left
            switch (true) {
                case (lefta < 0):
                    lefta = lefta + ranges(50, 80);
                    break;
                case (lefta > winW):
                    lefta = lefta - ranges(50, 80);
                    break;
                default:
                    lefta = lefta + movPos;
            }
            //元素top位置的随机取值，以及超过屏幕高度时，回到屏幕的最上部
            switch (true) {
                case (topb < 0):
                    topb = topb + 50;
                    break;
                case (topb > winH):
                    lefta = ranges(10, winW);
                    topb = -ranges(60, 70);
                    // 飘至底部时去除过渡的效果，免得元素在页面上出现往上飘的效果
                    Otarget[aimer].style.transitionProperty = "none";
                    break;
                default:
                    topb = topb + ranges(50, 100);
            }

            //将算好的随机位置付给aimer元素对象
            chanPos(aimer, lefta, topb);
        }
        // 页面加载时，给定初始随机位置
        for (i; i < Otarget.length; i++) {
            // 这里是闭包的形式读到循环中对应的i，否则都是循环最后的那个值
            (function() {
                chanPos(i, ranges(25, winW - 30), -ranges(60, 155))
            })(i);
        }
        //每隔5000ms变更位置
        function roler() {
            for (j = 0; j < Otarget.length; j++) {
                // 这里是闭包的形式读到循环中对应的j
                (function() {
                    sparkMov(j)
                })(j)
            }
        }
        setInterval(roler, 5000);

基本结合示意图和javascript里的备注，应该很好理解了，加油～～～