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

zjLOVEcyj

于 2022-10-04 17:05:15 发布

阅读量993

点赞数 1

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

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

版权

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

8 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS及JavaScript实现的红包雨动画效果。通过设置元素定位与动画属性，让多个红包图片从页面顶部缓缓下落，营造出下雨般的视觉效果。此案例展示了如何利用CSS动画和JavaScript来生成随机动画时长与起始位置，增强了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

在这里插入图片描述