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">💧</div>
<div class="raindrop" style="--x: 93; --y: 72; --o: 0.3808301936208389; --a: 0.9843997541537985; --d: -0.40862218401976014; --s: 0.09871997635939378">💧</div>
<div class="raindrop" style="--x: 90; --y: 62; --o: 0.9536735530921485; --a: 1.411027374444992; --d: -0.3127125996256539; --s: 0.6282916209165195">💧</div>
<div class="raindrop" style="--x: 30; --y: 11; --o: 0.6506079396921924; --a: 0.6166295583543702; --d: 0.33535291415261037; --s: 0.2894949899850525">💧</div>
<div class="raindrop" style="--x: 22; --y: 36; --o: 0.10871762024422926; --a: 0.7525554927666145; --d: -0.22519368643623983; --s: 0.03685273737323724">💧</div>
<div class="raindrop" style="--x: 72; --y: 40; --o: 0.3099899974325513; --a: 1.2812964768477817; --d: 0.32623605300186576; --s: 0.6611158591690778">💧</div>
<div class="raindrop" style="--x: 10; --y: 46; --o: 0.8793247409452436; --a: 1.278104940328777; --d: -0.9810397287079864; --s: 0.18385874214726217">💧</div>
<div class="raindrop" style="--x: 99; --y: 52; --o: 0.6420702771634281; --a: 1.4082978713659016; --d: 0.6023031489489976; --s: 0.4664296298170483">💧</div>
<div class="raindrop" style="--x: 26; --y: 39; --o: 0.8055344716162505; --a: 0.7471022103498921; --d: -0.7129390632779877; --s: 0.7412877856867952">💧</div>
<div class="raindrop" style="--x: 47; --y: 27; --o: 0.8222154295541289; --a: 0.5658057365791369; --d: -0.39071355820703113; --s: 0.927496753789455">💧</div>
<div class="raindrop" style="--x: 71; --y: 91; --o: 0.19890050761889522; --a: 1.1525887831712012; --d: 0.0019586288665145446; --s: 0.0271277584286842">💧</div>
<div class="raindrop" style="--x: 36; --y: 91; --o: 0.46711811558515004; --a: 0.9621970545321004; --d: -0.1008142355167041; --s: 0.14879335619730072">💧</div>
<div class="raindrop" style="--x: 4; --y: 58; --o: 0.11066192562864141; --a: 0.6381853421247985; --d: -0.018686232448470008; --s: 0.09913304802337719">💧</div>
<div class="raindrop" style="--x: 53; --y: 3; --o: 0.1818166590558472; --a: 1.0204093026409733; --d: 0.5695873232122484; --s: 0.9632557310514767">💧</div>
<div class="raindrop" style="--x: 48; --y: 80; --o: 0.33912061303212937; --a: 1.4593027148165412; --d: -0.6798878798.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0