css+js网页红包雨效果实现

最新推荐文章于 2024-01-25 15:29:54 发布

zjLOVEcyj

最新推荐文章于 2024-01-25 15:29:54 发布

阅读量807

点赞数 1

分类专栏： JS网页交互文章标签： javascript css 前端

本文链接：https://blog.csdn.net/cyj5201314/article/details/127163888

版权

JS网页交互专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <style>
    .img {
      width: 40px;
      position: fixed;
      top: -100px;
      animation: down;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-duration: 1s;
    }
    @keyframes down {
      0% {
        transform: translateY(0px);
      }
      100% {
        transform: translateY(110vh);
      }
    }
  </style>
</head>

<body>
  


  <script>
    let clientWidth = document.body.clientWidth
    let redbags = new Array(20).fill(0).forEach(x => {
      document.body.innerHTML += `<img src="./红包.webp" class="img" style="animation-duration: ${Math.random()*2+1}s;left: ${Math.random()*clientWidth-40}px;" />`
    })

    
    
  </script>
</body>

</html>