div+css实现粒子下雪动画效果代码
代码语言：html
所属分类：粒子
代码描述：div+css实现粒子下雪动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
height: 100vh;
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
overflow: hidden;
filter: drop-shadow(0 0 10px white);
}
.snow {
position: absolute;
width: 10px;
height: 10px;
background: white;
border-radius: 50%;
}
.snow:nth-child(1) {
opacity: 0.9818;
transform: translate(81.7356vw, -10px) scale(0.8547);
animation: fall-1 30s -26s linear infinite;
}
@keyframes fall-1 {
68.938% {
transform: translate(76.1687vw, 68.938vh) scale(0.8547);
}
to {
transform: translate(78.95215vw, 100vh) scale(0.8547);
}
}
.snow:nth-child(2) {
opacity: 0.7927;
transform: translate(81.408vw, -10px) scale(0.3246);
animation: fall-2 30s -1s linear infinite;
}
@keyframes fall-2 {
71.03% {
transform: translate(86.7096vw, 71.03vh) scale(0.3246);
}
to {
transform: translate(84.0588vw, 100vh) scale(0.3246);
}
}
.snow:nth-child(3) {
opacity: 0.6802;
transform: translate(87.1845vw, -10px) scale(0.4509);
animation: fall-3 16s -11s linear infinite;
}
@keyframes fall-3 {
38.366% {
transform: translate(96.5161vw, 38.366vh) scale(0.4509);
}
to {
transform: translate(91.8503vw, 100vh) scale(0.4509);
}
}
.snow:nth-child(4) {
opacity: 0.4444;
transform: translate(65.1009vw, -10px) scale(0.6698);
animation: fall-4 24s -17s linear infinite;
}
@keyframes fall-4 {
34.398% {
transform: translate(73.2437vw, 34.398vh) scale(0.6698);
}
to {
transform: translate(69.1723vw, 100vh) scale(0.6698);
}
}
.snow:nth-child(5) {
opacity: 0.164;
transform: translate(73.8514vw, -10px) scale(0.4858);
animation: fall-5 10s -11s linear infinite;
}
@keyframes fall-5 {
61.226% {
transform: translate(76.8458vw, 61.226vh) scale(0.4858);
}
to {
transform: translate(75.3486vw, 100vh) scale(0.4858);
}
}
.snow:nth-child(6) {
opacity: 0.6211;
transform: translate(44.6464vw, -10px) scale(0.6561);
animation: fall-6 28s -27s linear infinite;
}
@keyframes fall-6 {
62.3% {
transform: translate(34.7391vw, 62.3vh) scale(0.6561);
}
to {
transform: translate(39.69275vw, 100vh) scale(0.6561);
}
}
.snow:nth-child(7) {
opacity: 0.0194;
transform: translate(25.3205vw, -10px) scale(0.0603);
animation: fall-7 24s -4s linear infinite;
}
@keyframes fall-7 {
56.194% {
transform: translate(26.2228vw, 56.194vh) scale(0.0603);
}
to {
transform: translate(25.77165vw, 100vh) scale(0.0603);
}
}
.snow:nth-child(8) {
opacity: 0.0187;
transform: translate(37.7417vw, -10px) scale(0.4809);
animation: fall-8 25s -1s linear infinite;
}
@keyframes fall-8 {
38.688% {
transform: translate(36.5231vw, 38.688vh) scale(0.4809);
}
to {
transform: translate(37.1324vw, 100vh) scale(0.4809);
}
}
.snow:nth-child(9) {
opacity: 0.4178;
transform: translate(93.3927vw, -10px) scale(0.6071);
animation: fall-9 18s -28s linear infinite;
}
@keyframes fall-9 {
51.226% {
transform: translate(101.9272vw, 51.226vh) scale(0.6071);
}
to {
transform: translate(97.65995vw, 100vh) scale(0.6071);
}
}
.snow:nth-child(10) {
opacity: 0.8841;
transform: translate(90.8504vw, -10px) scale(0.7172);
animation: fall-10 11s -15s linear infinite;
}
@keyframes fall-10 {
37.878% {
transform: translate(98.6797vw, 37.878vh) scale(0.7172);
}
to {
transform: translate(94.76505vw, 100vh) scale(0.7172);
}
}
.snow:nth-child(11) {
opacity: 0.3492;
transform: translate(28.8665vw, -10px) scale(0.924);
animation: fall-11 28s -6s linear infinite;
}
@keyframes fall-11 {
79.071% {
transform: translate(27.4515vw, 79.071vh) scale(0.924);
}
to {
transform: translate(28.159vw, 100vh) scale(0.924);
}
}
.snow:nth-child(12) {
opacity: 0.3734;
transform: translate(44.1357vw, -10px) scale(0.4985);
animation: fall-12 25s -1s linear infinite;
}
@keyframes fall-12 {
78.538% {
transform: translate(37.5508vw, 78.538vh) scale(0.4985);
}
to {
transform: translate(40.84325vw, 100vh) scale(0.4985);
}
}
.snow:nth-child(13) {
opacity: 0.6116;
transform: translate(4.8403vw, -10px) scale(0.32);
animation: fall-13 19s -4s linear infinite;
}
@keyframes fall-13 {
74.616% {
transform: translate(-1.3541vw, 74.616vh) scale(0.32);
}
to {
transform: translate(1.7431vw, 100vh) scale(0.32);
}
}
.snow:nth-child(14) {
opacity: 0.3666;
transform: translate(42.7068vw, -10px) scale(0.6506);
animation: fall-14 20s -28s linear infinite;
}
@keyframes fall-14 {
69.427% {
transform: translate(37.918vw, 69.427vh) scale(0.6506);
}
to {
transform: translate(40.3124vw, 100vh) scale(0.6506);
}
}
.snow:nth-child(15) {
opacity: 0.1556;
transform: translate(20.677vw, -10px) scale(0.005);
animation: fall-15 14s -25s linear infinite;
}
@keyframes fall-15 {
32.762% {
transform: translate(23.7964vw, 32.762vh) scale(0.005);
}
to {
transform: translate(22.2367vw, 100vh) scale(0.005);
}
}
.snow:nth-child(16) {
opacity: 0.3707;
transform: translate(76.1264vw, -10px) scale(0.0353);
animation: fall-16 14s -20s linear infinite;
}
@keyframes fall-16 {
59.597% {
transform: translate(74.4944vw, 59.597vh) scale(0.0353);
}
to {
transform: translate(75.3104vw, 100vh) scale(0.0353);
}
}
.snow:nth-child(17) {
opacity: 0.383;
transform: translate(27.7088vw, -10px) scale(0.8541);
animation: fall-17 30s -17s linear infinite;
}
@keyframes fall-17 {
45.184% {
transform: translate(35.5452vw, 45.184vh) scale(0.8541);
}
to {
transform: translate(31.627vw, 100vh) scale(0.8541);
}
}
.snow:nth-child(18) {
opacity: 0.1156;
transform: translate(58.8956vw, -10px) scale(0.802);
animation: fall-18 23s -18s linear infinite;
}
@keyframes fall-18 {
59.235% {
transform: translate(54.4594vw, 59.235vh) scale(0.802);
}
to {
transform: translate(56.6775vw, 100vh) scale(0.802);
}
}
.snow:nth-child(19) {
opacity: 0.3951;
transform: translate(67.7997vw, -10px) scale(0.5341);
animation: fall-19 21s -15s linear infinite;
}
@keyframes fall-19 {
55.238% {
transform: translate(65.8486vw, 55.238vh) scale(0.5341);
}
to {
transform: translate(66.82415vw, 100vh) scale(0.5341);
}
}
.snow:nth-child(20) {
opacity: 0.9318;
transform: translate(44.4314vw, -10px) scale(0.2171);
animation: fall-20 29s -26s linear infinite;
}
@keyframes fall-20 {
43.114% {
transform: translate(35.7082vw, 43.114vh) scale(0.2171);
}
to {
transform: translate(40.0698vw, 100vh) scale(0.2171);
}
}
.snow:nth-child(21) {
opacity: 0.1049;
transform: translate(13.5832vw, -10px) scale(0.4339);
animation: fall-21 20s -23s linear infinite;
}
@keyframes fall-21 {
48.302% {
transform: translate(17.2383vw, 48.302vh) scale(0.4339);
}
to {
transform: translate(15.41075vw, 100vh) scale(0.4339);
}
}
.snow:nth-child(22) {
opacity: 0.9077;
transform: translate(31.6423vw, -10px) scale(0.977);
animation: fall-22 28s -16s linear infinite;
}
@keyframes fall-22 {
36.17% {
transform: translate(23.2344vw, 36.17vh) scale(0.977);
}
to {
transform: translate(27.43835vw, 100vh) scale(0.977);
}
}
.snow:nth-child(23) {
opacity: 0.0487;
transform: translate(45.4516vw, -10px) scale(0.7224);
animation: fall-23 11s -29s linear infinite;
}
@keyframes fall-23 {
58.591% {
transform: translate(38.5025vw, 58.591vh) scale(0.7224);
}
to {
transform: translate(41.97705vw, 100vh) scale(0.7224);
}
}
.snow:nth-child(24) {
opacity: 0.177;
transform: translate(69.5464vw, -10px) scale(0.2255);
animation: fall-24 21s -8s linear infinite;
}
@keyframes fall-24 {
78.265% {
transform: translate(75.6113vw, 78.265vh) scale(0.2255);
}
to {
transform: translate(72.57885vw, 100vh) scale(0.2255);
}
}
.snow:nth-child(25) {
opacity: 0.8197;
transform: translate(11.0362vw, -10px) scale(0.4901);
animation: fall-25 19s -26s linear infinite;
}
@keyframes fall-25 {
31.561% {
transform: translate(12.4818vw, 31.561vh) scale(0.4901);
}
to {
transform: translate(11.759vw, 100vh) scale(0.4901);
}
}
.snow:nth-child(26) {
opacity: 0.4553;
transform: translate(51.9211vw, -10px) scale(0.9779);
animation: fall-26 11s -6s linear infinite;
}
@keyframes fall-26 {
50.638% {
transform: translate(43.7923vw, 50.638vh) scale(0.9779);
}
to {
transform: translate(47.8567vw, 100vh) scale(0.9779);
}
}
.snow:nth-child(27) {
opacity: 0.3188;
transform: translate(76.2232vw, -10px) scale(0.6598);
animation: fall-27 20s -13s linear infinite;
}
@keyframes fall-27 {
46.404% {
transform: translate(70.2727vw, 46.404vh) scale(0.6598);
}
to {
transform: translate(73.24795vw, 100vh) scale(0.6598);
}
}
.snow:nth-child(28) {
opacity: 0.9548;
transform: translate(8.9649vw, -10px) scale(0.5571);
animation: fall-28 15s -17s linear infinite;
}
@keyframes fall-28 {
57.586% {
transform: translate(8.211vw, 57.586vh) scale(0.5571);
}
to {
transform: translate(8.58795vw, 100vh) scale(0.5571);
}
}
.snow:nth-child(29) {
opacity: 0.3537;
transform: translate(8.6252vw, -10px) scale(0.0773);
animation: fall-29 27s -11s linear infinite;
}
@keyframes fall-29 {
59.918% {
transform: translate(15.606vw, 59.918vh) scale(0.0773);
}
to {
transform: translate(12.1156vw, 100vh) scale(0.0773);
}
}
.snow:nth-child(30) {
opacity: 0.5268;
transform: translate(28.8707vw, -10px) scale(0.3765);
animation: fall-30 21s -7s linear infinite;
}
@keyframes fall-30 {
39.866% {
transform: translate(33.3949vw, 39.866vh) scale(0.3765);
}
to {
transform: translate(31.1328vw, 100vh) scale(0.3765);
}
}
.snow:nth-child(31) {
opacity: 0.6316;
transform: translate(77.9513vw, -10px) scale(0.9699);
animation: fall-31 13s -13s linear infinite;
}
@keyframes fall-31 {
51.842% {
transform: translate(83.3511vw, 51.842vh) scale(0.9699);
}
to {
transform: translate(80.6512vw, 100vh) scale(0.9699);
}
}
.snow:nth-child(32) {
opacity: 0.417;
transform: translate(58.402vw, -10px) scale(0.2852);
animation: fall-32 12s -12s linear infinite;
}
@keyframes fall-32 {
71.67% {
transform: translate(66.9293vw, 71.67vh) scale(0.2852);
}
to {
transform: translate(62.66565vw, 100vh) scale(0.2852);
}
}
.snow:nth-child(33) {
opacity: 0.1478;
transform: translate(16.4042vw, -10px) scale(0.6466);
animation: fall-33 24s -18s linear infinite;
}
@keyframes fall-33 {
47.163% {
transform: translate(22.8078vw, 47.163vh) scale(0.6466);
}
to {
transform: translate(19.606vw, 100vh) scale(0.6466);
}
}
.snow:nth-child(34) {
opacity: 0.6332;
transform: translate(43.8156vw, -10px) scale(0.1297);
animation: fall-34 14s -4s linear infinite;
}
@keyframes fall-34 {
76.663% {
transform: translate(36.9195vw, 76.663vh) scale(0.1297);
}
to {
transform: translate(40.36755vw, 100vh) scale(0.1297);
}
}
.snow:nth-child(35) {
opacity: 0.7257;
transform: translate(27.5938vw, -10px) scale(0.1996);
animation: fall-35 16s -8s linear infinite;
}
@keyframes fall-35 {
74.361% {
transform: translate(27.6272vw, 74.361vh) scale(0.1996);
}
to {
transform: translate(27.6105vw, 100vh) scale(0.1996);
}
}
.snow:nth-child(36) {
opacity: 0.4914;
transform: translate(59.351vw, -10px) scale(0.9894);
animation: fall-36 21s -26s linear infinite;
}
@keyframes fall-36 {
32.318% {
transform: translate(67.9029vw, 32.318vh) scale(0.9894);
}
to {
transform: translate(63.62695vw, 100vh) scale(0.9894);
}
}
.snow:nth-child(37) {
opacity: 0.3677;
transform: translate(36.4869vw, -10px) scale(0.5718);
animation: fall-37 19s -21s linear infinite;
}
@keyframes fall-37 {
34.141% {
transform: translate(36.0453vw, 34.141vh) scale(0.5718);
}
to {
transform: translate(36.2661vw, 100vh) scale(0.5718);
}
}
.snow:nth-child(38) {
opacity: 0.7032;
transform: translate(58.4837vw, -10px) scale(0.1064);
animation: fall-38 12s -12s linear infinite;
}
@keyframes fall-38 {
35.988% {
transform: translate(61.8515vw, 35.988vh) scale(0.1064);
}
to {
transform: translate(60.1676vw, 100vh) scale(0.1064);
}
}
.snow:nth-child(39) {
opacity: 0.4568;
transform: translate(87.5287vw, -10px) scale(0.3572);
animation: fall-39 21s -16s linear infinite;
}
@keyframes fall-39 {
43.662% {
transform: translate(89.9747vw, 43.662vh) scale(0.3572);
}
to {
transform: translate(88.7517vw, 100vh) scale(0.3572);
}
}
.snow:nth-child(40) {
opacity: 0.692;
transform: translate(37.7536vw, -10px) scale(0.1034);
animation: fall-40 20s -20s linear infinite;
}
@keyframes fall-40 {
47.079% {
transform: translate(29.8358vw, 47.079vh) scale(0.1034);
}
to {
transform: translate(33.7947vw, 100vh) scale(0.1034);
}
}
.snow:nth-child(41) {
opacity: 0.9817;
transform: translate(11.8116vw, -10px) scale(0.9532);
animation: fall-41 29s -7s linear infinite;
}
@keyframes fall-41 {
38.48% {
transform: translate(8.1344vw, 38.48vh) scale(0.9532);
}
to {
transform: translate(9.973vw, 100vh) scale(0.9532);
}
}
.snow:nth-child(42) {
opacity: 0.719;
transform: translate(94.6673vw, -10px) scale(0.4352);
animation: fall-42 21s -20s linear infinite;
}
@keyframes fall-42 {
66.063% {
transform: translate(103.2206vw, 66.063vh) scale(0.4352);
}
to {
transform: translate(98.94395vw, 100vh) scale(0.4352);
}
}
.snow:nth-child(43) {
opacity: 0.5197;
transform: translate(82.5044vw, -10px) scale(0.783);
animation: fall-43 22s -25s linear infinite;
}
@keyframes fall-43 {
60.912% {
transform: translate(84.5828vw, 60.912vh) scale(0.783);
}
to {
transform: translate(83.5436vw, 100vh) scale(0.783);
}
}
.snow:nth-child(44) {
opacity: 0.1458;
transform: translate(79.5215vw, -10px) scale(0.5419);
animation: fall-44 28s -10s linear infinite;
}
@keyframes fall-44 {
73.605% {
transform: translate(74.9847vw, 73.605vh) scale(0.5419);
}
to {
transform: translate(77.2531vw, 100vh) scale(0.5419);
}
}
.snow:nth-child(45) {
opacity: 0.7388;
transform: translate(4.6979vw, -10px) scale(0.3198);
animation: fall-45 12s -25s linear infinite;
}
@keyframes fall-45 {
64.377% {
transform: translate(11.7319vw, 64.377vh) scale(0.3198);
}
to {
transform: translate(8.2149vw, 100vh) scale(0.3198);
}
}
.snow:nth-child(46) {
opacity: 0.7544;
transform: translate(61.6787vw, -10px) scale(0.563);
animation: fall-46 17s -23s linear infinite;
}
@keyframes fall-46 {
62.489% {
transform: translate(62.2968vw, 62.489vh) scale(0.563);
}
to {
transform: translate(61.98775vw, 100vh) scale(0.563);
}
}
.snow:nth-child(47) {
opacity: 0.4303;
transform: translate(2.517vw, -10px) scale(0.7988);
animation: fall-47 28s -7s linear infinite;
}
@keyframes fall-47 {
46.688% {
transform: translate(3.7951vw, 46.688vh) scale(0.7988);
}
to {
transform: translate(3.15605vw, 100vh) scale(0.7988);
}
}
.snow:nth-child(48) {
opacity: 0.9378;
transform: translate(26.2978vw, -10px) scale(0.59);
animation: fall-48 15s -29s linear infinite;
}
@keyframes fall-48 {
74.813% {
transform: translate(22.67vw, 74.813vh) scale(0.59);
}
to {
transform: translate(24.4839vw, 100vh) scale(0.59);
}
}
.snow:nth-child(49) {
opacity: 0.0123;
transform: translate(6.3931vw, -10px) scale(0.8583);
animation: fall-49 27s -15s linear infinite;
}
@keyframes fall-49 {
35.724% {
transform: translate(-2.2422vw, 35.724vh) scale(0.8583);
}
to {
transform: translate(2.07545vw, 100vh) scale(0.8583);
}
}
.snow:nth-child(50) {
opacity: 0.7438;
transform: translate(11.3823vw, -10px) scale(0.8379);
animation: fall-50 16s -7s linear infinite;
}
@keyframes fall-50 {
38.374% {
transform: translate(14.5413vw, 38.374vh) scale(0.8379);
}
to {
transform: translate(12.9618vw, 100vh) scale(0.8379);
}
}
.snow:nth-child(51) {
opacity: 0.6784;
transform: translate(23.3228vw, -10px) scale(0.2632);
animation: fall-51 26s -8s linear infinite;
}
@keyframes fall-51 {
39.043% {
transform: translate(27.3605vw, 39.043vh) scale(0.2632);
}
to {
transform: translate(25.34165vw, 100vh) scale(0.2632);
}
}
.snow:nth-child(52) {
opacity: 0.2655;
transform: translate(39.0468vw, -10px) scale(0.3902);
animation: fall-52 27s -11s linear infinite;
}
@keyframes fall-52 {
62.145% {
transform: translate(47.1129vw, 62.145vh) scale(0.3902);
}
to {
transform: translate(43.07985vw, 100vh) scale(0.3902);
}
}
.snow:nth-child(53) {
opacity: 0.5934;
transform: translate(76.9364vw, -10px) scale(0.8334);
animation: fall-53 27s -18s linear infinite;
}
@keyframes fall-53 {
59.261% {
transform: translate(79.2157vw, 59.261vh) scale(0.8334);
}
to {
transform: translate(78.07605vw, 100vh) scale(0.8334);
}
}
.snow:nth-child(54) {
opacity: 0.8104;
transform: translate(91.1314vw, -10px) scale(0.9003);
animation: fall-54 24s -8s linear infinite;
}
@keyframes fall-54 {
40.254% {
transform: translate(98.4205vw, 40.254vh) scale(0.9003);
}
to {
transform: translate(94.77595vw, 100vh) scale(0.9003);
}
}
.snow:nth-child(55) {
opacity: 0.4629;
transform: translate(93.8138vw, -10px) scale(0.9217);
animation: fall-55 29s -24s linear infinite;
}
@keyframes fall-55 {
68.475% {
transform: translate(92.4596vw, 68.475vh) scale(0.9217);
}
to {
transform: translate(93.1367vw, 100vh) scale(0.9217);
}
}
.snow:nth-child(56) {
opacity: 0.5956;
transform: translate(64.5002vw, -10px) scale(0.536);
animation: fall-56 11s -25s linear infinite;
}
@keyframes fall-56 {
36.959% {
transform: translate(66.5373vw, 36.959vh) scale(0.536);
}
to {
transform: translate(65.51875vw, 100vh) scale(0.536);
}
}
.snow:nth-child(57) {
opacity: 0.0039;
transform: translate(42.4107vw, -10px) scale(0.6996);
animation: fall-57 22s -7s linear infinite;
}
@keyframes fall-57 {
31.256% {
transform: translate(50.4333vw, 31.256vh) scale(0.6996);
}
to {
transform: translate(46.422vw, 100vh) scale(0.6996);
}
}
.snow:nth-child(58) {
opacity: 0.3028;
transform: translate(69.7171vw, -10px) scale(0.3985);
animation: fall-58 23s -29s linear infinite;
}
@keyframes fall-58 {
33.565% {
transform: translate(64.2083vw, 33.565vh) scale(0.3985);
}
to {
transform: translate(66.9627vw, 100vh) scale(0.3985);
}
}
.snow:nth-child(59) {
opacity: 0.9848;
transform: translate(82.1553vw, -10px) scale(0.4017);
animation: fall-59 23s -20s linear infinite;
}
@keyframes fall-59 {
46.15% {
transform: translate(76.294vw, 46.15vh) scale(0.4017);
}
to {
transform: translate(79.22465vw, 100vh) scale(0.4017);
}
}
.snow:nth-child(60) {
opacity: 0.6101;
transform: translate(89.1613vw, -10px) scale(0.645);
animation: fall-60 15s -7s linear infinite;
}
@keyframes fall-60 {
46.443% {
transform: translate(94.2995vw, 46.443vh) scale(0.645);
}
to {
transform: translate(91.7304vw, 100vh) scale(0.645);
}
}
.snow:nth-child(61) {
opacity: 0.4188;
transform: translate(43.4443vw, -10px) scale(0.4861);
animation: fall-61 25s -2s linear infinite;
}
@keyframes fall-61 {
54.582% {
transform: translate(47.5433vw, 54.582vh) scale(0.4861);
}
to {
transform: translate(45.4938vw, 100vh) scale(0.4861);
}
}
.snow:nth-child(62) {
opacity: 0.5189;
transform: translate(15.3916vw, -10px) scale(0.7456);
animation: fall-62 13s -1s linear infinite;
}
@keyframes fall-62 {
69.916% {
transform: translate(20.0018vw, 69.916vh) scale(0.7456);
}
to {
transform: translate(17.6967vw, 100vh) scale(0.7456);
}
}
.snow:nth-child(63) {
opacity: 0.0814;
transform: translate(29.8746vw, -10px) scale(0.4994);
animation: fall-63 19s -4s linear infinite;
}
@keyframes fall-63 {
42.4% {
transform: translate(35.6185vw, 42.4vh) scale(0.4994);
}
to {
transform: translate(32.74655vw, 100vh) scale(0.4994);
}
}
.snow:nth-child(64) {
opacity: 0.3233;
transform: translate(2.0646vw, -10px) scale(0.4947);
animation: fall-64 27s -27s linear infinite;
}
@keyframes fall-64 {
62.037% {
transform: translate(-3.3115vw, 62.037vh) scale(0.4947);
}
to {
transform: translate(-0.62345vw, 100vh) scale(0.4947);
}
}
.snow:nth-child(65) {
opacity: 0.2835;
transform: translate(36.4497vw, -10px) scale(0.9582);
animation: fall-65 18s -6s linear infinite;
}
@keyframes fall-65 {
77.474% {
transform: translate(33.6947vw, 77.474vh) scale(0.9582);
}
to {
transform: translate(35.0722vw, 100vh) scale(0.9582);
}
}
.snow:nth-child(66) {
opacity: 0.7176;
transform: translate(86.017vw, -10px) scale(0.2037);
animation: fall-66 13s -26s linear infinite;
}
@keyframes fall-66 {
56.841% {
transform: translate(80.9618vw, 56.841vh) scale(0.2037);
}
to {
transform: translate(83.4894vw, 100vh) scale(0.2037);
}
}
.snow:nth-child(67) {
opacity: 0.9834;
transform: translate(23.3777vw, -10px) scale(0.1357);
animation: fall-67 17s -14s linear infinite;
}
@keyframes fall-67 {
36.617% {
transform: translate(30.8007vw, 36.617vh) scale(0.1357);
}
to {
transform: translate(27.0892vw, 100vh) scale(0.1357);
}
}
.snow:nth-child(68) {
opacity: 0.101;
transform: translate(36.2904vw, -10px) scale(0.953);
animation: fall-68 29s -1s linear infinite;
}
@keyframes fall-68 {
52.309% {
transform: translate(44.0491vw, 52.309vh) scale(0.953);
}
to {
transform: translate(40.16975vw, 100vh) scale(0.953);
}
}
.snow:nth-child(69) {
opacity: 0.9516;
transform: translate(41.915vw, -10px) scale(0.007);
animation: fall-69 10s -14s linear infinite;
}
@keyframes fall-69 {
49.264% {
transform: translate(42.3113vw, 49.264vh) scale(0.007);
}
to {
transform: translate(42.11315vw, 100vh) scale(0.007);
}
}
.snow:nth-child(70) {
opacity: 0.7037;
transform: translate(20.7742vw, -10px) scale(0.5518);
animation: fall-70 22s -3s linear infinite;
}
@keyframes fall-70 {
35.039% {
transform: translate(14.8065vw, 35.039vh) scale(0.5518);
}
to {
transform: translate(17.79035vw, 100vh) scale(0.5518);
}
}
.snow:nth-child(71) {
opacity: 0.5021;
transform: translate(16.003vw, -10px) scale(0.5604);
animation: fall-71 24s -9s linear infinite;
}
@keyframes fall-71 {
43.609% {
transform: translate(25.9808vw, 43.609vh) scale(0.5604);
}
to {
transform: translate(20.9919vw, 100vh) scale(0.5604);
}
}
.snow:nth-child(72) {
opacity: 0.6135;
transform: translate(72.0104vw, -10px) scale(0.5702);
animation: fall-72 19s -21s linear infinite;
}
@keyframes fall-72 {
75.051% {
transform: translate(71.0886vw, 75.051vh) scale(0.5702);
}
to {
transform: translate(71.5495vw, 100vh) scale(0.5702);
}
}
.snow:nth-child(73) {
opacity: 0.737;
transform: translate(47.0612vw, -10px) scale(0.2053);
animation: fall-73 25s -16s linear infinite;
}
@keyframes fall-73 {
53.681% {
transform: translate(44.6206vw, 53.681vh) scale(0.2053);
}
to {
transform: translate(45.8409vw, 100vh) scale(0.2053);
}
}
.snow:nth-child(74) {
opacity: 0.3051;
transform: translate(5.438vw, -10px) scale(0.6253);
animation: fall-74 18s -13s linear infinite;
}
@keyframes fall-74 {
34.3% {
transform: translate(7.3138vw, 34.3vh) scale(0.6253);
}
to {
transform: translate(6.3759vw, 100vh) scale(0.6253);
}
}
.snow:nth-child(75) {
opacity: 0.0652;
transform: translate(38.9683vw, -10px) scale(0.3695);
animation: fall-75 21s -28s linear infinite;
}
@keyframes fall-75 {
56.212% {
transform: translate(34.7721vw, 56.212vh) scale(0.3695);
}
to {
transform: translate(36.8702vw, 100vh) scale(0.3695);
}
}
.snow:nth-child(76) {
opacity: 0.4446;
transform: translate(82.5816vw, -10px) scale(0.2312);
animation: fall-76 25s -23s linear infinite;
}
@keyframes fall-76 {
63.834% {
transform: translate(74.2694vw, 63.834vh) scale(0.2312);
}
to {
transform: translate(78.4255vw, 100vh) scale(0.2312);
}
}
.snow:nth-child(77) {
opacity: 0.4738;
transform: translate(69.7904vw,.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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