div+css大雨滴下雨动画效果代码-html代码-BFW代码库

div+css大雨滴下雨动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css大雨滴下雨动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body {
  background-color: #90a4ae;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

@keyframes rainfall {
  0% {
    transform: translate3d(10vw, 0, 0) rotate(15deg);
  }
  100% {
    transform: translate3d(3vw, 100vh, 0) rotate(15deg);
  }
}
.raindrop {
  animation: rainfall calc(var(--a) * 1s) linear calc(var(--d) * 1s) infinite;
  font-size: 1rem;
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc((var(--y) + 50) * -1px);
}
</style>


</head>

<body>
  <div class="rain">
  <div class="raindrop" style="--x: 62; --y: 19; --o: 0.9834331765918127; --a: 1.1284300579166129; --d: -0.5670234148514144; --s: 0.31844005270623854">💧</div>
  <div class="raindrop" style="--x: 51; --y: 20; --o: 0.09914179590330119; --a: 1.2998752452809006; --d: -0.47678361147178316; --s: 0.34653602100033454">💧</div>
  <div class="raindrop" style="--x: 26; --y: 29; --o: 0.5005775168284354; --a: 1.0048194278487204; --d: 0.4519058994703231; --s: 0.09230186755816217">💧</div>
  <div class="raindrop" style="--x: 18; --y: 25; --o: 0.23169973930898213; --a: 1.1783096588878652; --d: -0.29743294501935313; --s: 0.4296583653020405">💧</div>
  <div class="raindrop" style="--x: 52; --y: 30; --o: 0.7663754294016578; --a: 0.9357880239518355; --d: -0.49783374744473363; --s: 0.3734550999140611">💧</div>
  <div class="raindrop" style="--x: 77; --y: 61; --o: 0.7734436533864972; --a: 1.060716489628584; --d: -0.9624463792213063; --s: 0.7626207212429819">💧</div>
  <div class="raindrop" style="--x: 57; --y: 42; --o: 0.4376269048866188; --a: 0.8676069090435019; --d: 0.9266206850615388; --s: 0.4134101575866025">💧</div>
  <div class="raindrop" style="--x: 53; --y: 5; --o: 0.7551589332693547; --a: 1.4542031552980272; --d: -0.29470437882841294; --s: 0.0019769983598076912">💧</div>
  <div class="raindrop" style="--x: 29; --y: 10; --o: 0.08972266636737913; --a: 0.548224211528981; --d: 0.8149857399439813; --s: 0.25551314902283595">💧</div>
  <div class="raindrop" style="--x: 44; --y: 33; --o: 0.9308256859587658; --a: 1.4979443867636084; --d: -0.4535676643621249; --s: 0.8244057193008674">💧</div>
  <div class="raindrop" style="--x: 27; --y: 43; --o: 0.24090589099133175; --a: 1.2877594952420812; --d: 0.3964670363113445; --s: 0.20231059606777912">💧</div>
  <div class="raindrop" style="--x: 8; --y: 26; --o: 0.4598827537301682; --a: 0.8374361280514857; --d: 0.5981843315877686; --s: 0.03860730820654701">💧</div>
  <div class="raindrop" style="--x: 81; --y: 52; --o: 0.32927227168962525; --a: 1.2806483601437821; --d: 0.2923768078888105; --s: 0.878555000928388">💧</div>
  <div class="raindrop" style="--x: 57; --y: 56; --o: 0.9407585799469609; --a: 1.4125497981553607; --d: -0.7034689814394417; --s: 0.661569523255136">💧</div>
  <div class="raindrop" style="--x: 43; --y: 58; --o: 0.06637536465169047; --a: 1.1092771432220276; --d: -0.007580529884938514; --s: 0.21373663204039461">💧</div>
  <div class="raindrop" style="--x: 93; --y: 71; --o: 0.4277200952013249; --a: 1.3349179090305148; --d: -0.48428011428959206; --s: 0.628224398673739">💧</div>
  <div class="raindrop" style="--x: 16; --y: 62; --o: 0.44187164067756135; --a: 0.7171680806813516; --d: 0.07672400710033722; --s: 0.9855182478221978">💧<.........完整代码请登录后点击上方下载按钮下载查看