html+js+css 实现满天星

Posted 2022-07-16 hello-dummy

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 实现满天星的主要内容，如果未能解决你的问题，请参考以下文章

JS框架_(JQuery.js)夜晚天空满天星星闪烁动画