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%;
            position: relative;
        }
        .star-animation {
       
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: black;
            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>
    // 自调用函数,在加载该文件时就开始工作
    (function(container) {
        // window.innerWidth 控制星星的密度
        for (var i = 0; i < window.innerWidth/5; 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 "+1+"px "+1+"px";
        star.style.borderRadius = width + 'px';

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

script>
html>
View Code

效果:

html+js+css 实现满天星_第1张图片

 

转载于:https://www.cnblogs.com/hello-dummy/p/11361210.html

你可能感兴趣的:(前端,javascript)