js实现星星海

首先需要获取屏幕大小：

    var screenWidth = document.documentElement.clientWidth;
    var screenHeight = document.documentElement.clientHeight;

接着可以定义动画（星星透明度）：

@keyframes flash {
            0%{opacity: 0}
            25%{opacity: 0.25}
            50%{opacity: 0.5}
            75%{opacity: 0.75}
            100%{opacity: 1}
        }

全部代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 70px;
            height: 80px;
            background: url("./images/star.jpg") no-repeat;
            animation: flash 1s;
        }
        body{
            background-color: black
        }
        @keyframes flash {
            0%{opacity: 0}
            25%{opacity: 0.25}
            50%{opacity: 0.5}
            75%{opacity: 0.75}
            100%{opacity: 1}
        }
    </style>
</head>
<body>

<script>
    var screenWidth = document.documentElement.clientWidth;
    var screenHeight = document.documentElement.clientHeight;
    //  生产50个星星
    for (let i = 0; i <50 ; i++) {
        var box=document.createElement('div');
        document.body.appendChild(box);
        x=Math.random()*screenWidth;
        y=Math.random()*screenHeight;
        box.style.position='relative';
        box.style.left=x+'px';
        box.style.right=y+'px';
    }
    boxList=document.getElementsByTagName("div");
    for (let i = 0; i < boxList.length; i++) {
        boxList[i].onmouseover=function () {
            this.style.transform='scale(1.5,1.5)';
        };
        boxList[i].onmouseout=function () {
            this.style.transform='scale(1,1)';
        };
    }
</script>
</body>
</html>

效果如下：

 

posted @ 2020-07-04 10:22  君莫笑丶丶  阅读(217)  评论(0)  编辑  收藏  举报