用户名: 用QQ登录本站
密 码: 注册
验证码:
首页 软件 编程 笑话 知识 公告 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
广告位招租中
2021年 劳动节 12
2021年 端午节 56
2022年 元 旦 257
2022年 春 节 288
 
  • 您现在的位置:首页 >> JS >> 内容

    js实现星星闪特效

    内容摘要: 思路:1、准备一张星星的图片2、创建多个星星(可以利用for循坏)3、求出可视网页的宽高 clientWidth,clientHeight4、设置星星的随机坐标 利用 Math.random()5、设置星星的缩放可以用css中的scale6、设置星星的缩放延迟频率 animationDelay7、给星星加动画(鼠标移动时,星星方法旋转)代码如下style*{......

      思路:


    1、准备一张星星的图片

    2、创建多个星星(可以利用for循坏)

    3、求出可视网页的宽高 clientWidth,clientHeight

    4、设置星星的随机坐标 利用 Math.random()

    5、设置星星的缩放可以用css中的scale

    6、设置星星的缩放延迟频率 animationDelay

    7、给星星加动画(鼠标移动时,星星方法旋转)

    代码如下


    <style>

    *{

    margin: 0;

    padding: 0;

    list-style: none;

    }


    body{

    background-color: #000;

    }


    span{

    width: 30px;

    height: 30px;

    background: url("../images_js/star.png") no-repeat;

    position: absolute;

    background-size:100% 100%;

    animation: flash 1s alternate infinite;

    }


    @keyframes flash {

    0%{opacity: 0;}

    100%{opacity: 1;}

    }


    span:hover{

    transform: scale(3, 3) rotate(180deg) !important;

    transition: all 1s;

    }

    </style>

    </head>

    <body>

    <script>

    window.onload = function () {

    // 1. 求出屏幕的尺寸

    var screenW = document.documentElement.clientWidth;

    var screenH = document.documentElement.clientHeight;


    // 2. 动态创建星星

    for(var i=0; i<150; i++){

    // 2.1 创建星星

    var span = document.createElement('span');

    document.body.appendChild(span);


    // 2.2 随机的坐标

    var x = parseInt(Math.random() * screenW);

    var y = parseInt(Math.random() * screenH);

    span.style.left = x + 'px';

    span.style.top = y + 'px';


    // 2.3 随机缩放

    var scale = Math.random() * 1.5;

    span.style.transform = 'scale('+ scale + ', ' + scale + ')';


    // 2.4 频率

    var rate = Math.random() * 1.5;

    span.style.animationDelay = rate + 's';

    }

    }

    </script>

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


    发布日期:2021/3/10 发布时间:15:10:19 点击:317 录入:齐天大圣
  • 上一篇:css3实现书本翻页效果的示例代码
  • 下一篇:js利用cookie实现记住用户页面操作
  • 本类新增
    本类热门文章
    Baidu

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