简化版 分站 地图 日历 影视
计算器 行情 加解密 长度 面积
首页 软件 编程 笑话 知识 公告 注册 登录 用QQ登录本站
文明驾车我带头,文明行路我带头,礼貌让座我带头      

[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
广告位招租中
2021年 春 节 15
2021年 情人节 17
2021年 元宵节 29
2022年 元 旦 338
全部 综合数码金融娱乐服务报刊政府机构 推荐 申请 友情  
  • 您现在的位置:首页 >> 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 点击:800 录入:齐天大圣
  • 上一篇:js实现搜索提示框效果
  • 下一篇:基于js实现的图片拖拽排序
  • 本类新增
    本类热门文章
    Baidu

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