zoukankan      html  css  js  c++  java
  • 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>

    效果如下:

  • 相关阅读:
    《校园封神榜》第二阶段个人工作总结——第五天
    寻找水王2——寻找三个小水王
    站立会议04(第二次冲刺)
    站立会议03(第二次冲刺)
    站立会议02(第二次冲刺)
    站立会议01(第二次冲刺)
    测试计划
    评价cnblogs.com的用户体验
    第一次冲刺各组评价的回复
    第一次冲刺对各组的评价
  • 原文地址:https://www.cnblogs.com/manbaout/p/13233995.html
Copyright © 2011-2022 走看看