【CSS】分享纯CSS实现Rain效果

最新推荐文章于 2025-04-10 16:33:48 发布

原创最新推荐文章于 2025-04-10 16:33:48 发布

· 733 阅读

4 ·

版权

文章标签：

#css #前端

CSS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用CSS和JavaScript创建一个无限滚动的雨滴动画，通过循环增加多个雨点并利用`@keyframes`和`animation`属性，实现了视觉上的动态效果。通过随机位置生成，每个雨点的独特位置让整个场景显得生动自然。

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

效果

实现原理

循环增加n多个雨点，这里写死的
利用animation 动画无限向下滚动雨点

实现代码

html

  <div class="drop"></div>
  <div class="drop"></div>
  <div class="drop"></div>
  ...

scss

body {
  height: 100vh;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  overflow: hidden;
  filter: drop-shadow(0 0 10px white);
}

@function random_range($min, $max) {
  $rand: random();
  $random_range: $min + floor($rand * (($max - $min) + 1));
  @return $random_range;
}

.drop {
  $total: 528;
  background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ), to(rgba(255,255,255,0.6)));
  background: linear-gradient(top, rgba(13,52,58,1) 0%, rgba(255,255,255,.6) 100%);
	width:1px;
	height:89px;
	position: absolute;
	bottom:200px;
  animation: fall .63s linear infinite;
  
  @for $i from 1 through $total {
    $drop-left: random_range(0, 2600) * 1px;
    $drop-top: random_range(-1000, 1400) * 1px;
    
    &:nth-child(#{$i}) {
      left: $drop-left;
      top: $drop-top;
    }
  }
}

@keyframes fall {
  to { margin-top:900px; }
}