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.679887879881881; --s: 0.537326494646378">💧</div>
<div class="raindrop" style="--x: 33; --y: 79; --o: 0.40462958529398363; --a: 1.0626850408518296; --d: 0.7797668169621415; --s: 0.06852869795766936">💧</div>
<div class="raindrop" style="--x: 32; --y: 10; --o: 0.4634164854691585; --a: 1.038709032772094; --d: 0.504518091557888; --s: 0.9961750164978747">💧</div>
<div class="raindrop" style="--x: 94; --y: 64; --o: 0.0684643112896226; --a: 1.2394130272218709; --d: 0.5385087506192576; --s: 0.12895623996982808">💧</div>
<div class="raindrop" style="--x: 31; --y: 79; --o: 0.9679767433558422; --a: 0.6375632401915701; --d: -0.582716731747817; --s: 0.416315136851112">💧</div>
<div class="raindrop" style="--x: 24; --y: 69; --o: 0.5765659941692214; --a: 1.272784221566407; --d: -0.6801410925183675; --s: 0.8096892993848421">💧</div>
<div class="raindrop" style="--x: 33; --y: 59; --o: 0.8639131916564782; --a: 1.086866839278576; --d: -0.1478147152747571; --s: 0.3062301526332125">💧</div>
<div class="raindrop" style="--x: 98; --y: 48; --o: 0.008379521363996112; --a: 1.0630118740696997; --d: 0.31067972420967127; --s: 0.8322355611756622">💧</div>
<div class="raindrop" style="--x: 85; --y: 14; --o: 0.035486693937521796; --a: 0.949695870085117; --d: -0.3644558979891017; --s: 0.5646474001885957">💧</div>
<div class="raindrop" style="--x: 42; --y: 79; --o: 0.9548790852050446; --a: 1.0961086304279906; --d: -0.008588806274962835; --s: 0.6132650597935554">💧</div>
<div class="raindrop" style="--x: 67; --y: 49; --o: 0.9133483446490018; --a: 0.9222612359554787; --d: 0.9024127631364189; --s: 0.13650914906066847">💧</div>
<div class="raindrop" style="--x: 67; --y: 22; --o: 0.9621919853496412; --a: 1.0450549444092794; --d: -0.8437110391825184; --s: 0.2131146979647751">💧</div>
<div class="raindrop" style="--x: 50; --y: 22; --o: 0.22941452363601655; --a: 0.9835397581224956; --d: 0.29284283894350827; --s: 0.8115477643212501">💧</div>
<div class="raindrop" style="--x: 33; --y: 92; --o: 0.2584753016187846; --a: 0.7620006712200915; --d: 0.5965916639108175; --s: 0.2693969959947271">💧</div>
<div class="raindrop" style="--x: 12; --y: 65; --o: 0.7148695065683377; --a: 0.9735376134479117; --d: -0.5100309992582175; --s: 0.05221179631812167">💧</div>
<div class="raindrop" style="--x: 5; --y: 68; --o: 0.9376076840994276; --a: 0.5599695823754305; --d: 0.2274962386718955; --s: 0.2817101303278151">💧</div>
<div class="raindrop" style="--x: 79; --y: 76; --o: 0.8257971837865683; --a: 1.4476237171498738; --d: -0.8224458179536378; --s: 0.6365576120304952">💧</div>
<div class="raindrop" style="--x: 73; --y: 90; --o: 0.04598419003375298; --a: 1.425730474287411; --d: 0.028302048006136005; --s: 0.8228251625684366">💧</div>
<div class="raindrop" style="--x: 90; --y: 21; --o: 0.6210716140067174; --a: 1.003686685776473; --d: 0.6318189639730241; --s: 0.06592789329877324">💧</div>
<div class="raindrop" style="--x: 36; --y: 1; --o: 0.6273981303420355; --a: 0.5914851068673534; --d: -0.9465928812245461; --s: 0.644141400865704">💧</div>
<div class="raindrop" style="--x: 93; --y: 2; --o: 0.8084991550566814; --a: 1.4381122851386254; --d: -0.4420615493019522; --s: 0.0208990211165081">💧</div>
<div class="raindrop" style="--x: 48; --y: 6; --o: 0.3397877499070172; --a: 0.7325336322286509; --d: -0.69404857389471; --s: 0.45809154674369434">💧</div>
<div class="raindrop" style="--x: 55; --y: 57; --o: 0.6336193965132368; --a: 1.3247040376606547; --d: 0.9587911475200461; --s: 0.6972301732091568">💧</div>
<div class="raindrop" style="--x: 43; --y: 57; --o: 0.46595567998788545; --a: 0.7917382336986711; --d: -0.7732429198150199; --s: 0.8066915986897241">💧</div>
<div class="raindrop" style="--x: 22; --y: 6; --o: 0.6850736853776462; --a: 1.1744437275141346; --d: -0.7520699236027775; --s: 0.22084397618362117">💧</div>
<div class="raindrop" style="--x: 58; --y: 23; --o: 0.06923886904897647; --a: 1.403987263439045; --d: 0.2590506896194582; --s: 0.02865913560743172">💧</div>
<div class="raindrop" style="--x: 87; --y: 13; --o: 0.9027075889781284; --a: 1.1890097210518853; --d: 0.8048509810481641; --s: 0.21878700675356444">💧</div>
<div class="raindrop" style="--x: 0; --y: 7; --o: 0.9391575914108552; --a: 1.2622604528114503; --d: 0.7821380713217212; --s: 0.3926718550368291">💧</div>
<div class="raindrop" style="--x: 39; --y: 47; --o: 0.29955367038659886; --a: 1.2938183535035601; --d: -0.6400471538852637; --s: 0.640616926761657">💧</div>
<div class="raindrop" style="--x: 21; --y: 70; --o: 0.7704626652492161; --a: 1.1483828820051936; --d: -0.948518896156207; --s: 0.18745500435734486">💧</div>
<div class="raindrop" style="--x: 3; --y: 45; --o: 0.5518182445122324; --a: 0.5903210563101207; --d: -0.27883940369789295; --s: 0.8040127188475656">💧</div>
<div class="raindrop" style="--x: 16; --y: 29; --o: 0.5310726044893628; --a: 0.6622370358117418; --d: 0.6122222841990199; --s: 0.05451702053267837">💧</div>
<div class="raindrop" style="--x: 58; --y: 73; --o: 0.9000053147624396; --a: 0.7618669412512662; --d: 0.4252734361217443; --s: 0.8213147107294303">💧</div>
<div class="raindrop" style="--x: 13; --y: 56; --o: 0.9162633739924493; --a: 1.089092487289257; --d: -0.9429787443269566; --s: 0.5445929891002512">💧</div>
<div class="raindrop" style="--x: 67; --y: 47; --o: 0.42762204799500747; --a: 0.9460433004013635; --d: -0.7398771661210555; --s: 0.4015999090247062">💧</div>
<div class="raindrop" style="--x: 72; --y: 16; --o: 0.16198333797151365; --a: 1.4902732358493236; --d: 0.07985553034052995; --s: 0.8007973109980198">💧</div>
<div class="raindrop" style="--x: 56; --y: 13; --o: 0.8416686528446367; --a: 1.270770334430907; --d: 0.2583224058255511; --s: 0.47277809552599015">💧</div>
<div class="raindrop" style="--x: 45; --y: 75; --o: 0.6274434426421749; --a: 0.661781583041898; --d: 0.17157342679633425; --s: 0.7341157232654523">💧</div>
<div class="raindrop" style="--x: 28; --y: 23; --o: 0.16073684244634778; --a: 1.156925527414389; --d: -0.7907644251747237; --s: 0.9563310473281184">💧</div>
<div class="raindrop" style="--x: 91; --y: 25; --o: 0.8964035872461429; --a: 0.9343775251050064; --d: 0.7505084074546868; --s: 0.6273094637816192">💧</div>
<div class="raindrop" style="--x: 74; --y: 44; --o: 0.6819223616720134; --a: 0.5916715605671976; --d: -0.47824478598618736; --s: 0.9671622077745348">💧</div>
<div class="raindrop" style="--x: 39; --y: 29; --o: 0.6977135674812507; --a: 0.5254402155264688; --d: -0.41285990492393143; --s: 0.2983669875331192">💧</div>
<div class="raindrop" style="--x: 30; --y: 26; --o: 0.5584352616172203; --a: 0.7654374310207861; --d: -0.5278065340003848; --s: 0.14466087266033512">💧</div>
<div class="raindrop" style="--x: 16; --y: 2; --o: 0.9133569924617013; --a: 1.4210013184440544; --d: -0.5121247205904811; --s: 0.3035425655554147">💧</div>
<div class="raindrop" style="--x: 89; --y: 78; --o: 0.9812227265265374; --a: 0.7142556930254398; --d: 0.726170794206431; --s: 0.42472523756602243">💧</div>
<div class="raindrop" style="--x: 18; --y: 25; --o: 0.19816569805917683; --a: 0.8944139590389508; --d: 0.20965356807360802; --s: 0.12909005541912122">💧</div>
<div class="raindrop" style="--x: 9; --y: 98; --o: 0.7648295316920808; --a: 0.8595505228512437; --d: 0.9783242670588908; --s: 0.4068249208353849">💧</div>
<div class="raindrop" style="--x: 57; --y: 72; --o: 0.046909826661108545; --a: 0.76411723619998; --d: -0.21783657790117905; --s: 0.3676930040272919">💧</div>
<div class="raindrop" style="--x: 3; --y: 82; --o: 0.006360751742314097; --a: 0.9209181935289545; --d: -0.1993951684721944; --s: 0.2083207633986024">💧</div>
<div class="raindrop" style="--x: 90; --y: 62; --o: 0.00567477637485414; --a: 1.4790281528369702; --d: 0.2711931107495693; --s: 0.3484387403087108">💧</div>
<div class="raindrop" style="--x: 77; --y: 71; --o: 0.9990077681570988; --a: 1.294078768736301; --d: -0.30736698548414365; --s: 0.8173702074562408">💧</div>
<div class="raindrop" style="--x: 34; --y: 75; --o: 0.36935529644070453; --a: 0.6646145240236068; --d: -0.368756975605423; --s: 0.6520838569967251">💧</div>
<div class="raindrop" style="--x: 43; --y: 54; --o: 0.4106299235412225; --a: 1.4065728187374187; --d: 0.13718272794121633; --s: 0.729223699869697">💧</div>
<div class="raindrop" style="--x: 92; --y: 90; --o: 0.8299550860663532; --a: 1.1274020168481118; --d: -0.22093866083391012; --s: 0.15648387892373217">💧</div>
<div class="raindrop" style="--x: 56; --y: 7; --o: 0.46761476461651763; --a: 0.5225912787887834; --d: -0.991180550897; --s: 0.626623468710158">💧</div>
<div class="raindrop" style="--x: 78; --y: 86; --o: 0.49210946764441665; --a: 1.2930899154102538; --d: -0.5570899114971111; --s: 0.8951084718921307">💧</div>
<div class="raindrop" style="--x: 12; --y: 70; --o: 0.8690801198175102; --a: 0.7171553794471066; --d: 0.4146951111023336; --s: 0.6302170920360846">💧</div>
<div class="raindrop" style="--x: 64; --y: 79; --o: 0.28452696200468885; --a: 0.584739755082957; --d: -0.8618981123063452; --s: 0.24169388123021762">💧</div>
<div class="raindrop" style="--x: 89; --y: 99; --o: 0.5004927634844734; --a: 0.8819165371813023; --d: -0.1629122395506366; --s: 0.39866237944489025">💧</div>
<div class="raindrop" style="--x: 36; --y: 41; --o: 0.21496629720287475; --a: 0.8152153557190325; --d: -0.14562105117684965; --s: 0.445748962435079">💧</div>
<div class="raindrop" style="--x: 15; --y: 69; --o: 0.574161176049959; --a: 0.8189111286378017; --d: -0.07533461878807479; --s: 0.0998311333566737">💧</div>
<div class="raindrop" style="--x: 76; --y: 68; --o: 0.28882028363025136; --a: 0.6299288004215293; --d: 0.9611486380089884; --s: 0.28243560438607007">💧</div>
<div class="raindrop" style="--x: 83; --y: 68; --o: 0.8429716451103526; --a: 0.5407102644113115; --d: 0.891247555333524; --s: 0.7092631226071413">💧</div>
<div class="raindrop" style="--x: 42; --y: 93; --o: 0.33108709306106254; --a: 1.4580227508068089; --d: -0.8202126710605082; --s: 0.06605767582898059">💧</div>
<div class="raindrop" style="--x: 14; --y: 80; --o: 0.852840089644002; --a: 0.7804763705062019; --d: 0.21136928216080353; --s: 0.9992194338990192">💧</div>
<div class="raindrop" style="--x: 0; --y: 17; --o: 0.576885190975936; --a: 0.5279138979497988; --d: -0.9084828801078766; --s: 0.25251427861673337">💧</div>
<div class="raindrop" style="--x: 15; --y: 64; --o: 0.7479373453405724; --a: 1.2309934655164907; --d: -0.9397418462459495; --s: 0.026349035168951707">💧</div>
<div class="raindrop" style="--x: 38; --y: 77; --o: 0.9961080975112466; --a: 0.7476991442806631; --d: 0.9591742108445791; --s: 0.7580251729279766">💧</div>
<div class="raindrop" style="--x: 95; --y: 19; --o: 0.32217128039819287; --a: 1.0196058627984044; --d: -0.3526753134544771; --s: 0.8134665525873941">💧</div>
<div class="raindrop" style="--x: 85; --y: 1; --o: 0.43755598767391546; --a: 0.9229967743059342; --d: -0.14625657996896724; --s: 0.950353019995.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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