js 星星闪动

最新推荐文章于 2023-01-11 20:38:48 发布

LDH-

最新推荐文章于 2023-01-11 20:38:48 发布

阅读量2.6k

点赞数

分类专栏： JavaScript 文章标签：星星闪动 javascript星星闪动动画

本文链接：https://blog.csdn.net/weixin_38362146/article/details/78032200

版权

JavaScript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

有趣的星星闪动案例给大家分享下，互相学习

</head>
<body>
<div class="container">
    <img  src="../img/tip_notify_star.png" alt=""/>
</div>
<div class="start-animation">开始动画</div>
</body>
<script src="../asstes/jquery-1.9.1.min.js"></script>
<script src="../js/star.js"></script>
</html>

.container{
  position: relative;
  width: 600px;
  height: 600px;
  margin: 0 auto;
  background: black;
}
img{
  position: absolute;
  width: 0;
  height: 0;
  top: 100px;
  left: 100px;

}
.star-active{
  animation: starActive 1.5s ease-in-out 0s 4 alternate;
}
@keyframes starActive {
  from{
    width: 0;
    height: 0;

  }
  to{
    width: 16px;
    height: 16px;

  }
}
/*第二个scss*/
.start-animation{
  background: red;
  height: 40px;
  width: 100px;
  margin: 0 auto;
  line-height: 40px;
  text-align:center;
  border-radius: 5px;
  cursor: pointer;
}

$(function(){
    setInterval(function(){
        createStar();//创建星星
        removeStar();//删除消失的星星，回收利用
    },1000);
    var starList = [];
    function createStar(){
        var starHtml = '<img class="star-active" src="../img/tip_notify_star.png" alt=""/>';
        var starEle = $(starHtml);
        var left = Math.random()*584;
        var top = Math.random()*584
        starEle.css({left:left,top:top})
        $(".container").append(starEle);
        starList.push(starEle);//将添加的元素存储到数组里面
  removeStar()//移除旧的星星（已经完成使命的星星）



    }
//移除星星
    function removeStar(){
        if(starList.length >10){
            var firstEle = starList.shift();
            firstEle.remove();
        }
    }
});