简化版 分站 地图 日历 影视
计算器 行情 加解密 长度 面积
首页 软件 编程 笑话 知识 公告 注册 登录 用QQ登录本站
  • 全部 综合数码金融娱乐服务报刊政府机构 推荐 申请 友情  
    您现在的位置:首页 >> JS >> 内容

    js实现星星海特效的示例

    内容摘要:!DOCTYPE htmlhtml lang='en'headmeta charset='UTF-8'titleTitle/titlestyle div{ width: 70px; height: 80px; background: url('./images/star.jpg') no-repeat; animation: flash 1s; } body......

      <!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>

      版权声明:本内容来源于互联网,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。


    发布日期:2020/9/28 发布时间:17:12:44 点击:266 
  • 上一篇:js实现搜索提示框效果
  • 下一篇:没有了
  • 本类新增
    本类热门文章
    Baidu

    YiJiaCMS V3.35 Build 20.8.26(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    齐天大圣® 制 作 ©2000-2020