html+js+css 实现满天星

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>满天星</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        html,body {
            width: 100%;
            height: 100%;
            background-color: black;
            position: relative;
        }
        .star-animation {
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        /*动画设计*/
        @-webkit-keyframes identifier {
            25% {
                transform: scale(1.5);
            }
            50% {
                transform: scale(2);
            }
            75% {
                transform: scale(1.5);
            }
            100% {
                transform: scale(1);
            }

        }

        @-o-keyframes identifier {
            25% {
                transform: scale(1.5);
            }
            50% {
                transform: scale(2);
            }
            75% {
                transform: scale(1.5);
            }
            100% {
                transform: scale(1);
            }

        }

        @-moz-keyframes identifier {
            25% {
                transform: scale(1.5);
            }
            50% {
                transform: scale(2);
            }
            75% {
                transform: scale(1.5);
            }
            100% {
                transform: scale(1);
            }

        }

        @keyframes identifier {
            25% {
                transform: scale(1.5);
            }
            50% {
                transform: scale(2);
            }
            75% {
                transform: scale(1.5);
            }
            100% {
                transform: scale(1);
            }

        }
    </style>
</head>
<body>
<div></div>
<div class="star-animation"></div>
</body>
<script src="js/star-animation.js"></script>
<script>
    // 自调用函数，在加载该文件时就开始工作
    (function(container) {
        for (var i = 0; i < 300; i++) {
            container.append(starFactory());
        }
    })(document.getElementsByClassName("star-animation")[0]);

    // 创建星星的一个工厂函数
    function starFactory() {
        let star = document.createElement("div");
        let width = Math.ceil(Math.random()*5);
        star.style.position = "absolute";
        star.style.width = width + 'px';
        star.style.height = width + 'px';
        star.style.backgroundColor = '#909090';
        star.style.top = Math.ceil(Math.random()*window.innerHeight) + 'px';
        star.style.left = Math.ceil(Math.random()*window.innerWidth) + 'px';
        star.style.boxShadow = "#545454 0 0 "+Math.ceil(Math.random()*5)+"px"+Math.ceil(Math.random()*5)+" 5px";
        star.style.borderRadius = width + 'px';

        // 当星星直径小于3时，有一个放大缩小的动画
        if (width < 3) {
            star.style.animation = "identifier 2000ms infinite 500ms";
        }
        return star;
    }

</script>
</html>
View Code
效果：
html+js+css 实现满天星

猜你喜欢
