前言
本文是笔者写CSS时常用的套路。不论效果再怎么华丽，万变不离其宗。
1、交错动画
有时候，我们需要给多个元素添加同一个动画，播放后，不难发现它们会一起运动，一起结束，这样就会显得很平淡无奇。
那么如何将动画变得稍微有趣一点呢？很简单，既然它们都是同一时刻开始运动的，那么让它们不在同一时刻运动不就可以了吗。如何让它们不在同一时刻运动呢？注意到CSS动画有延迟delay这一属性。
举个栗子，比如有十个元素播放十个动画，将第二个元素的动画播放时间设定为比第一个元素晚0.5秒（也就是将延迟设为0.5秒），其他元素以此类推，这样它们就会错开来，形成一种独特的视觉效果。
这就是所谓的交错动画：通过设置不同的延迟时间，达到动画交错播放的效果。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background: #222;
}
.loading {
display: flex;
animation-delay: 1s;
}
.loading .dot {
position: relative;
width: 2em;
height: 2em;
margin: 0.8em;
border-radius: 50%;
}
.loading .dot::before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: inherit;
border-radius: inherit;
animation: wave 2s ease-out infinite;
}
.loading .dot:nth-child(1) {
background: #7ef9ff;
}
.loading .dot:nth-child(1)::before {
animation-delay: 0.2s;
}
.loading .dot:nth-child(2) {
background: #89cff0;
}
.loading .dot:nth-child(2)::before {
animation-delay: 0.4s;
}
.loading .dot:nth-child(3) {
background: #4682b4;
}
.loading .dot:nth-child(3)::before {
animation-delay: 0.6s;
}
.loading .dot:nth-child(4) {
background: #0f52ba;
}
.loading .dot:nth-child(4)::before {
animation-delay: 0.8s;
}
.loading .dot:nth-child(5) {
background: #000080;
}
.loading .dot:nth-child(5)::before {
animation-delay: 1s;
}
@keyframes wave {
50%,
75% {
transform: scale(2.5);
}
80%,
100% {
opacity: 0;
}
}
</style>
</head>
<body>
<div class="loading">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</body>
</html>2、用JS分割文本
还有一种经常用到的玩法：用JS将句子或单词分割成字母，并给每个字母加上不同延时的动画，同样也很华丽。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");
body {
display: flex;
flex-direction: column;
height: 100vh;
justify-content: center;
align-items: center;
background-image: linear-gradient(rgba(16, 16, 16, 0.8), rgba(16, 16, 16, 0.8)), url(https://i.loli.net/2019/10/18/buDT4YS6zUMfHst.jpg);
background-size: cover;
}
p {
margin: 0 9em;
font-size: 2em;
font-weight: 600;
}
.landIn {
display: flex;
flex-wrap: wrap;
line-height: 1.8;
color: white;
font-family: Lora, serif;
white-space: pre;
}
.landIn span {
animation: landIn 0.8s ease-out both;
}
@keyframes landIn {
from {
opacity: 0;
transform: translateY(-20%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
</head>
<body>
<p class="landIn">Ano hi watashitachi mada shiranai no Fushigi no monogatari desu.</p>
<script>
var landInTexts = document.querySelectorAll(".landIn");
landInTexts.forEach(function (landInText) {
var letters = landInText.textContent.split("");
landInText.textContent = "";
letters.forEach(function (letter, i) {
var span = document.createElement("span");
span.textContent = letter;
span.style.animationDelay = i * 0.05 + "s";
landInText.append(span);
});
});</script>
</body>
</html>一般我们都是从第一个元素开始交错的。但如果要从中间元素开始交错的话，就要给当前元素的延时各加上一个值，这个值就是中间元素的下标到当前元素的下标的距离（也就是下标之差的绝对值）与步长的乘积，即：delay + Math.abs(i – middle) * step，其中中间元素的下标middle = letters.filter(e => e !== "").length / 2
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");
body {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
text-align: center;
background: #222;
}
.reveal {
position: relative;
display: flex;
color: #6ee1f5;
font-size: 2em;
font-family: Raleway, sans-serif;
letter-spacing: 3px;
text-transform: uppercase;
white-space: pre;
}
.reveal span {
opacity: 0;
transform: scale(0);
animation: fadeIn 2.4s forwards;
}
.reveal::before,
.reveal::after {
position: absolute;
content: "";
top: 0;
bottom: 0;
width: 2px;
height: 100%;
background: white;
opacity: 0;
transform: scale(0);
}
.reveal::before {
left: 50%;
animation: slideLeft 1.5s cubic-bezier(0.7, -0.6, 0.3, 1.5) forwards;
}
.reveal::after {
right: 50%;
animation: slideRight 1.5s cubic-bezier(0.7, -0.6, 0.3, 1.5) forwards;
}
@keyframes fadeIn {
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes slideLeft {
to {
left: -6%;
opacity: 1;
transform: scale(0.9);
}
}
@keyframes slideRight {
to {
right: -6%;
opacity: 1;
transform: scale(0.9);
}
}
</style>
</head>
<body>
<div class="reveal">sword art online</div>
<script>
var duration = 0.8;
var delay = 0.3;
var revealText = document.querySelector(".reveal");
var letters = revealText.textContent.split("");
revealText.textContent = "";
var middle = letters.filter(function (e) { return e !== " "; }).length / 2;
letters.forEach(function (letter, i) {
var span = document.createElement("span");
span.textContent = letter;
span.style.animationDelay = delay + Math.abs(i - middle) * 0.1 + "s";
revealText.append(span);
});
</script>
</body>
</html>所有有交错特性的动画都在这儿
3、随机粒子动画
说到随机性，我们可以实现一种更疯狂的效果：给几百个粒子添加交错动画，并且交错时间随机，位置大小也都是随机。如此一来我们就能用纯CSS模拟出下雪的效果。
又到了白色相簿的季节呢~为什么你写CSS这么熟练啊？
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<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.6621;
transform: translate(43.0379vw, -10px) scale(0.2978);
animation: fall-1 11s -11s linear infinite;
}
@keyframes fall-1 {
37.725% {
transform: translate(48.8238vw, 37.725vh) scale(0.2978);
}
to {
transform: translate(45.93085vw, 100vh) scale(0.2978);
}
}
.snow:nth-child(2) {
opacity: 0.2795;
transform: translate(17.276vw, -10px) scale(0.1726);
animation: fall-2 21s -11s linear infinite;
}
@keyframes fall-2 {
58.058% {
transform: translate(14.6649vw, 58.058vh) scale(0.1726);
}
to {
transform: translate(15.97045vw, 100vh) scale(0.1726);
}
}
.snow:nth-child(3) {
opacity: 0.1615;
transform: translate(65.6559vw, -10px) scale(0.2701);
animation: fall-3 13s -23s linear infinite;
}
@keyframes fall-3 {
62.309% {
transform: translate(55.8253vw, 62.309vh) scale(0.2701);
}
to {
transform: translate(60.7406vw, 100vh) scale(0.2701);
}
}
.snow:nth-child(4) {
opacity: 0.5718;
transform: translate(71.0377vw, -10px) scale(0.8411);
animation: fall-4 14s -1s linear infinite;
}
@keyframes fall-4 {
75.112% {
transform: translate(69.5615vw, 75.112vh) scale(0.8411);
}
to {
transform: translate(70.2996vw, 100vh) scale(0.8411);
}
}
.snow:nth-child(5) {
opacity: 0.631;
transform: translate(57.6828vw, -10px) scale(0.3243);
animation: fall-5 21s -23s linear infinite;
}
@keyframes fall-5 {
58.701% {
transform: translate(53.1075vw, 58.701vh) scale(0.3243);
}
to {
transform: translate(55.39515vw, 100vh) scale(0.3243);
}
}
.snow:nth-child(6) {
opacity: 0.3483;
transform: translate(55.4957vw, -10px) scale(0.8037);
animation: fall-6 14s -7s linear infinite;
}
@keyframes fall-6 {
75.352% {
transform: translate(54.9388vw, 75.352vh) scale(0.8037);
}
to {
transform: translate(55.21725vw, 100vh) scale(0.8037);
}
}
.snow:nth-child(7) {
opacity: 0.4275;
transform: translate(99.4778vw, -10px) scale(0.5927);
animation: fall-7 21s -20s linear infinite;
}
@keyframes fall-7 {
47.175% {
transform: translate(90.0957vw, 47.175vh) scale(0.5927);
}
to {
transform: translate(94.78675vw, 100vh) scale(0.5927);
}
}
.snow:nth-child(8) {
opacity: 0.2207;
transform: translate(18.5668vw, -10px) scale(0.0858);
animation: fall-8 12s -23s linear infinite;
}
@keyframes fall-8 {
46.667% {
transform: translate(10.9775vw, 46.667vh) scale(0.0858);
}
to {
transform: translate(14.77215vw, 100vh) scale(0.0858);
}
}
.snow:nth-child(9) {
opacity: 0.877;
transform: translate(87.8984vw, -10px) scale(0.771);
animation: fall-9 11s -26s linear infinite;
}
@keyframes fall-9 {
68.629% {
transform: translate(97.6631vw, 68.629vh) scale(0.771);
}
to {
transform: translate(92.78075vw, 100vh) scale(0.771);
}
}
.snow:nth-child(10) {
opacity: 0.9665;
transform: translate(50.9038vw, -10px) scale(0.0751);
animation: fall-10 28s -23s linear infinite;
}
@keyframes fall-10 {
43.505% {
transform: translate(59.7685vw, 43.505vh) scale(0.0751);
}
to {
transform: translate(55.33615vw, 100vh) scale(0.0751);
}
}
.snow:nth-child(11) {
opacity: 0.0856;
transform: translate(36.3064vw, -10px) scale(0.2248);
animation: fall-11 21s -4s linear infinite;
}
@keyframes fall-11 {
51.309% {
transform: translate(42.6383vw, 51.309vh) scale(0.2248);
}
to {
transform: translate(39.47235vw, 100vh) scale(0.2248);
}
}
.snow:nth-child(12) {
opacity: 0.6734;
transform: translate(97.633vw, -10px) scale(0.5847);
animation: fall-12 14s -2s linear infinite;
}
@keyframes fall-12 {
65.269% {
transform: translate(88.2275vw, 65.269vh) scale(0.5847);
}
to {
transform: translate(92.93025vw, 100vh) scale(0.5847);
}
}
.snow:nth-child(13) {
opacity: 0.3159;
transform: translate(89.472vw, -10px) scale(0.9599);
animation: fall-13 13s -29s linear infinite;
}
@keyframes fall-13 {
72.377% {
transform: translate(82.8716vw, 72.377vh) scale(0.9599);
}
to {
transform: translate(86.1718vw, 100vh) scale(0.9599);
}
}
.snow:nth-child(14) {
opacity: 0.333;
transform: translate(22.9281vw, -10px) scale(0.4042);
animation: fall-14 13s -24s linear infinite;
}
@keyframes fall-14 {
53.712% {
transform: translate(18.3428vw, 53.712vh) scale(0.4042);
}
to {
transform: translate(20.63545vw, 100vh) scale(0.4042);
}
}
.snow:nth-child(15) {
opacity: 0.5999;
transform: translate(16.8078vw, -10px) scale(0.8765);
animation: fall-15 15s -12s linear infinite;
}
@keyframes fall-15 {
30.495% {
transform: translate(10.3336vw, 30.495vh) scale(0.8765);
}
to {
transform: translate(13.5707vw, 100vh) scale(0.8765);
}
}
.snow:nth-child(16) {
opacity: 0.5734;
transform: translate(13.4941vw, -10px) scale(0.5822);
animation: fall-16 18s -2s linear infinite;
}
@keyframes fall-16 {
44.128% {
transform: translate(20.1489vw, 44.128vh) scale(0.5822);
}
to {
transform: translate(16.8215vw, 100vh) scale(0.5822);
}
}
.snow:nth-child(17) {
opacity: 0.0018;
transform: translate(24.8206vw, -10px) scale(0.1275);
animation: fall-17 25s -5s linear infinite;
}
@keyframes fall-17 {
54.47% {
transform: translate(23.0891vw, 54.47vh) scale(0.1275);
}
to {
transform: translate(23.95485vw, 100vh) scale(0.1275);
}
}
.snow:nth-child(18) {
opacity: 0.4925;
transform: translate(38.5932vw, -10px) scale(0.1504);
animation: fall-18 13s -28s linear infinite;
}
@keyframes fall-18 {
38.316% {
transform: translate(32.9632vw, 38.316vh) scale(0.1504);
}
to {
transform: translate(35.7782vw, 100vh) scale(0.1504);
}
}
.snow:nth-child(19) {
opacity: 0.4296;
transform: translate(51.0592vw, -10px) scale(0.7871);
animation: fall-19 14s -6s linear infinite;
}
@keyframes fall-19 {
76.22% {
transform: translate(49.0436vw, 76.22vh) scale(0.7871);
}
to {
transform: translate(50.0514vw, 100vh) scale(0.7871);
}
}
.snow:nth-child(20) {
opacity: 0.7278;
transform: translate(94.8955vw, -10px) scale(0.1421);
animation: fall-20 26s -29s linear infinite;
}
@keyframes fall-20 {
38.934% {
transform: translate(103.2587vw, 38.934vh) scale(0.1421);
}
to {
transform: translate(99.0771vw, 100vh) scale(0.1421);
}
}
.snow:nth-child(21) {
opacity: 0.9197;
transform: translate(38.669vw, -10px) scale(0.3106);
animation: fall-21 17s -27s linear infinite;
}
@keyframes fall-21 {
42.273% {
transform: translate(42.005vw, 42.273vh) scale(0.3106);
}
to {
transform: translate(40.337vw, 100vh) scale(0.3106);
}
}
.snow:nth-child(22) {
opacity: 0.1099;
transform: translate(60.0334vw, -10px) scale(0.8627);
animation: fall-22 26s -29s linear infinite;
}
@keyframes fall-22 {
39.593% {
transform: translate(57.2401vw, 39.593vh) scale(0.8627);
}
to {
transform: translate(58.63675vw, 100vh) scale(0.8627);
}
}
.snow:nth-child(23) {
opacity: 0.211;
transform: translate(14.803vw, -10px) scale(0.583);
animation: fall-23 23s -2s linear infinite;
}
@keyframes fall-23 {
38.315% {
transform: translate(5.9476vw, 38.315vh) scale(0.583);
}
to {
transform: translate(10.3753vw, 100vh) scale(0.583);
}
}
.snow:nth-child(24) {
opacity: 0.4449;
transform: translate(52.1343vw, -10px) scale(0.6949);
animation: fall-24 24s -8s linear infinite;
}
@keyframes fall-24 {
58.547% {
transform: translate(59.5037vw, 58.547vh) scale(0.6949);
}
to {
transform: translate(55.819vw, 100vh) scale(0.6949);
}
}
.snow:nth-child(25) {
opacity: 0.9591;
transform: translate(84.9135vw, -10px) scale(0.7988);
animation: fall-25 14s -23s linear infinite;
}
@keyframes fall-25 {
50.256% {
transform: translate(82.0647vw, 50.256vh) scale(0.7988);
}
to {
transform: translate(83.4891vw, 100vh) scale(0.7988);
}
}
.snow:nth-child(26) {
opacity: 0.3636;
transform: translate(38.7748vw, -10px) scale(0.3001);
animation: fall-26 13s -18s linear infinite;
}
@keyframes fall-26 {
69.721% {
transform: translate(45.2438vw, 69.721vh) scale(0.3001);
}
to {
transform: translate(42.0093vw, 100vh) scale(0.3001);
}
}
.snow:nth-child(27) {
opacity: 0.2001;
transform: translate(41.6252vw, -10px) scale(0.1809);
animation: fall-27 23s -15s linear infinite;
}
@keyframes fall-27 {
35.344% {
transform: translate(47.316vw, 35.344vh) scale(0.1809);
}
to {
transform: translate(44.4706vw, 100vh) scale(0.1809);
}
}
.snow:nth-child(28) {
opacity: 0.2789;
transform: translate(31.3817vw, -10px) scale(0.7127);
animation: fall-28 21s -27s linear infinite;
}
@keyframes fall-28 {
75.727% {
transform: translate(36.0695vw, 75.727vh) scale(0.7127);
}
to {
transform: translate(33.7256vw, 100vh) scale(0.7127);
}
}
.snow:nth-child(29) {
opacity: 0.1083;
transform: translate(73.8568vw, -10px) scale(0.198);
animation: fall-29 23s -20s linear infinite;
}
@keyframes fall-29 {
43.71% {
transform: translate(83.247vw, 43.71vh) scale(0.198);
}
to {
transform: translate(78.5519vw, 100vh) scale(0.198);
}
}
.snow:nth-child(30) {
opacity: 0.8926;
transform: translate(0.4104vw, -10px) scale(0.0315);
animation: fall-30 27s -11s linear infinite;
}
@keyframes fall-30 {
55.864% {
transform: translate(-0.8816vw, 55.864vh) scale(0.0315);
}
to {
transform: translate(-0.2356vw, 100vh) scale(0.0315);
}
}
.snow:nth-child(31) {
opacity: 0.7728;
transform: translate(91.9763vw, -10px) scale(0.3066);
animation: fall-31 27s -21s linear infinite;
}
@keyframes fall-31 {
79.993% {
transform: translate(99.0867vw, 79.993vh) scale(0.3066);
}
to {
transform: translate(95.5315vw, 100vh) scale(0.3066);
}
}
.snow:nth-child(32) {
opacity: 0.7882;
transform: translate(82.9524vw, -10px) scale(0.9236);
animation: fall-32 30s -19s linear infinite;
}
@keyframes fall-32 {
46.082% {
transform: translate(79.624vw, 46.082vh) scale(0.9236);
}
to {
transform: translate(81.2882vw, 100vh) scale(0.9236);
}
}
.snow:nth-child(33) {
opacity: 0.4401;
transform: translate(98.6364vw, -10px) scale(0.5874);
animation: fall-33 25s -24s linear infinite;
}
@keyframes fall-33 {
37.384% {
transform: translate(95.2668vw, 37.384vh) scale(0.5874);
}
to {
transform: translate(96.9516vw, 100vh) scale(0.5874);
}
}
.snow:nth-child(34) {
opacity: 0.6073;
transform: translate(49.9265vw, -10px) scale(0.4498);
animation: fall-34 14s -21s linear infinite;
}
@keyframes fall-34 {
58.841% {
transform: translate(56.5336vw, 58.841vh) scale(0.4498);
}
to {
transform: translate(53.23005vw, 100vh) scale(0.4498);
}
}
.snow:nth-child(35) {
opacity: 0.7231;
transform: translate(2.9716vw, -10px) scale(0.6776);
animation: fall-35 13s -15s linear infinite;
}
@keyframes fall-35 {
76.523% {
transform: translate(-5.6724vw, 76.523vh) scale(0.6776);
}
to {
transform: translate(-1.3504vw, 100vh) scale(0.6776);
}
}
.snow:nth-child(36) {
opacity: 0.659;
transform: translate(79.1684vw, -10px) scale(0.9272);
animation: fall-36 14s -3s linear infinite;
}
@keyframes fall-36 {
47.901% {
transform: translate(73.8061vw, 47.901vh) scale(0.9272);
}
to {
transform: translate(76.48725vw, 100vh) scale(0.9272);
}
}
.snow:nth-child(37) {
opacity: 0.0399;
transform: translate(89.5291vw, -10px) scale(0.251);
animation: fall-37 14s -26s linear infinite;
}
@keyframes fall-37 {
73.184% {
transform: translate(82.0334vw, 73.184vh) scale(0.251);
}
to {
transform: translate(85.78125vw, 100vh) scale(0.251);
}
}
.snow:nth-child(38) {
opacity: 0.1435;
transform: translate(67.9357vw, -10px) scale(0.2208);
animation: fall-38 19s -2s linear infinite;
}
@keyframes fall-38 {
32.091% {
transform: translate(65.5842vw, 32.091vh) scale(0.2208);
}
to {
transform: translate(66.75995vw, 100vh) scale(0.2208);
}
}
.snow:nth-child(39) {
opacity: 0.7079;
transform: translate(70.4801vw, -10px) scale(0.4014);
animation: fall-39 14s -18s linear infinite;
}
@keyframes fall-39 {
69.508% {
transform: translate(66.4111vw, 69.508vh) scale(0.4014);
}
to {
transform: translate(68.4456vw, 100vh) scale(0.4014);
}
}
.snow:nth-child(40) {
opacity: 0.7484;
transform: translate(33.946vw, -10px) scale(0.7525);
animation: fall-40 27s -15s linear infinite;
}
@keyframes fall-40 {
78.168% {
transform: translate(41.3082vw, 78.168vh) scale(0.7525);
}
to {
transform: translate(37.6271vw, 100vh) scale(0.7525);
}
}
.snow:nth-child(41) {
opacity: 0.2543;
transform: translate(9.9878vw, -10px) scale(0.4013);
animation: fall-41 13s -16s linear infinite;
}
@keyframes fall-41 {
36.725% {
transform: translate(13.6659vw, 36.725vh) scale(0.4013);
}
to {
transform: translate(11.82685vw, 100vh) scale(0.4013);
}
}
.snow:nth-child(42) {
opacity: 0.5897;
transform: translate(68.8565vw, -10px) scale(0.9433);
animation: fall-42 24s -28s linear infinite;
}
@keyframes fall-42 {
69.986% {
transform: translate(63.6374vw, 69.986vh) scale(0.9433);
}
to {
transform: translate(66.24695vw, 100vh) scale(0.9433);
}
}
.snow:nth-child(43) {
opacity: 0.0115;
transform: translate(17.2564vw, -10px) scale(0.1682);
animation: fall-43 19s -20s linear infinite;
}
@keyframes fall-43 {
56.541% {
transform: translate(26.7374vw, 56.541vh) scale(0.1682);
}
to {
transform: translate(21.9969vw, 100vh) scale(0.1682);
}
}
.snow:nth-child(44) {
opacity: 0.6805;
transform: translate(13.086vw, -10px) scale(0.4874);
animation: fall-44 23s -15s linear infinite;
}
@keyframes fall-44 {
38.957% {
transform: translate(11.3304vw, 38.957vh) scale(0.4874);
}
to {
transform: translate(12.2082vw, 100vh) scale(0.4874);
}
}
.snow:nth-child(45) {
opacity: 0.4282;
transform: translate(61.7258vw, -10px) scale(0.6229);
animation: fall-45 18s -24s linear infinite;
}
@keyframes fall-45 {
31.116% {
transform: translate(51.7463vw, 31.116vh) scale(0.6229);
}
to {
transform: translate(56.73605vw, 100vh) scale(0.6229);
}
}
.snow:nth-child(46) {
opacity: 0.1397;
transform: translate(58.651vw, -10px) scale(0.7652);
animation: fall-46 13s -3s linear infinite;
}
@keyframes fall-46 {
74.061% {
transform: translate(51.4087vw, 74.061vh) scale(0.7652);
}
to {
transform: translate(55.02985vw, 100vh) scale(0.7652);
}
}
.snow:nth-child(47) {
opacity: 0.6227;
transform: translate(74.8589vw, -10px) scale(0.8737);
animation: fall-47 16s -29s linear infinite;
}
@keyframes fall-47 {
36.595% {
transform: translate(79.1727vw, 36.595vh) scale(0.8737);
}
to {
transform: translate(77.0158vw, 100vh) scale(0.8737);
}
}
.snow:nth-child(48) {
opacity: 0.0687;
transform: translate(35.234vw, -10px) scale(0.4187);
animation: fall-48 26s -27s linear infinite;
}
@keyframes fall-48 {
30.397% {
transform: translate(31.1905vw, 30.397vh) scale(0.4187);
}
to {
transform: translate(33.21225vw, 100vh) scale(0.4187);
}
}
.snow:nth-child(49) {
opacity: 0.9597;
transform: translate(29.7121vw, -10px) scale(0.9483);
animation: fall-49 24s -14s linear infinite;
}
@keyframes fall-49 {
36.747% {
transform: translate(25.1676vw, 36.747vh) scale(0.9483);
}
to {
transform: translate(27.43985vw, 100vh) scale(0.9483);
}
}
.snow:nth-child(50) {
opacity: 0.6702;
transform: translate(8.3477vw, -10px) scale(0.3474);
animation: fall-50 25s -29s linear infinite;
}
@keyframes fall-50 {
62.994% {
transform: translate(13.8879vw, 62.994vh) scale(0.3474);
}
to {
transform: translate(11.1178vw, 100vh) scale(0.3474);
}
}
.snow:nth-child(51) {
opacity: 0.5037;
transform: translate(79.8168vw, -10px) scale(0.6183);
animation: fall-51 15s -20s linear infinite;
}
@keyframes fall-51 {
72.232% {
transform: translate(84.553vw, 72.232vh) scale(0.6183);
}
to {
transform: translate(82.1849vw, 100vh) scale(0.6183);
}
}
.snow:nth-child(52) {
opacity: 0.9085;
transform: translate(89.072vw, -10px) scale(0.9721);
animation: fall-52 14s -16s linear infinite;
}
@keyframes fall-52 {
67.106% {
transform: translate(85.1024vw, 67.106vh) scale(0.9721);
}
to {
transform: translate(87.0872vw, 100vh) scale(0.9721);
}
}
.snow:nth-child(53) {
opacity: 0.1939;
transform: translate(59.3331vw, -10px) scale(0.1683);
animation: fall-53 12s -27s linear infinite;
}
@keyframes fall-53 {
55.882% {
transform: translate(56.702vw, 55.882vh) scale(0.1683);
}
to {
transform: translate(58.01755vw, 100vh) scale(0.1683);
}
}
.snow:nth-child(54) {
opacity: 0.828;
transform: translate(53.3175vw, -10px) scale(0.1754);
animation: fall-54 13s -22s linear infinite;
}
@keyframes fall-54 {
37.685% {
transform: translate(51.0041vw, 37.685vh) scale(0.1754);
}
to {
transform: translate(52.1608vw, 100vh) scale(0.1754);
}
}
.snow:nth-child(55) {
opacity: 0.0225;
transform: translate(21.2991vw, -10px) scale(0.5879);
animation: fall-55 30s -29s linear infinite;
}
@keyframes fall-55 {
44.1% {
transform: translate(26.0725vw, 44.1vh) scale(0.5879);
}
to {
transform: translate(23.6858vw, 100vh) scale(0.5879);
}
}
.snow:nth-child(56) {
opacity: 0.1228;
transform: translate(99.4797vw, -10px) scale(0.1941);
animation: fall-56 27s -14s linear infinite;
}
@keyframes fall-56 {
50.191% {
transform: translate(99.9598vw, 50.191vh) scale(0.1941);
}
to {
transform: translate(99.71975vw, 100vh) scale(0.1941);
}
}
.snow:nth-child(57) {
opacity: 0.8979;
transform: translate(62.8636vw, -10px) scale(0.1916);
animation: fall-57 23s -13s linear infinite;
}
@keyframes fall-57 {
55.733% {
transform: translate(67.4681vw, 55.733vh) scale(0.1916);
}
to {
transform: translate(65.16585vw, 100vh) scale(0.1916);
}
}
.snow:nth-child(58) {
opacity: 0.7576;
transform: translate(51.4178vw, -10px) scale(0.9596);
animation: fall-58 28s -15s linear infinite;
}
@keyframes fall-58 {
39.771% {
transform: translate(48.9096vw, 39.771vh) scale(0.9596);
}
to {
transform: translate(50.1637vw, 100vh) scale(0.9596);
}
}
.snow:nth-child(59) {
opacity: 0.9646;
transform: translate(97.3987vw, -10px) scale(0.2857);
animation: fall-59 16s -2s linear infinite;
}
@keyframes fall-59 {
69.828% {
transform: translate(90.7334vw, 69.828vh) scale(0.2857);
}
to {
transform: translate(94.06605vw, 100vh) scale(0.2857);
}
}
.snow:nth-child(60) {
opacity: 0.7083;
transform: translate(18.9843vw, -10px) scale(0.603);
animation: fall-60 12s -28s linear infinite;
}
@keyframes fall-60 {
59.106% {
transform: translate(28.9489vw, 59.106vh) scale(0.603);
}
to {
transform: translate(23.9666vw, 100vh) scale(0.603);
}
}
.snow:nth-child(61) {
opacity: 0.3225;
transform: translate(69.2613vw, -10px) scale(0.8992);
animation: fall-61 15s -25s linear infinite;
}
@keyframes fall-61 {
54.894% {
transform: translate(59.9186vw, 54.894vh) scale(0.8992);
}
to {
transform: translate(64.58995vw, 100vh) scale(0.8992);
}
}
.snow:nth-child(62) {
opacity: 0.3369;
transform: translate(52.1139vw, -10px) scale(0.0529);
animation: fall-62 27s -29s linear infinite;
}
@keyframes fall-62 {
39.755% {
transform: translate(60.2748vw, 39.755vh) scale(0.0529);
}
to {
transform: translate(56.19435vw, 100vh) scale(0.0529);
}
}
.snow:nth-child(63) {
opacity: 0.6627;
transform: translate(86.8842vw, -10px) scale(0.1051);
animation: fall-63 16s -12s linear infinite;
}
@keyframes fall-63 {
38.877% {
transform: translate(80.0524vw, 38.877vh) scale(0.1051);
}
to {
transform: translate(83.4683vw, 100vh) scale(0.1051);
}
}
.snow:nth-child(64) {
opacity: 0.533;
transform: translate(8.1887vw, -10px) scale(0.4503);
animation: fall-64 25s -11s linear infinite;
}
@keyframes fall-64 {
69.335% {
transform: translate(6.5249vw, 69.335vh) scale(0.4503);
}
to {
transform: translate(7.3568vw, 100vh) scale(0.4503);
}
}
.snow:nth-child(65) {
opacity: 0.0183;
transform: translate(79.5912vw, -10px) scale(0.505);
animation: fall-65 16s -4s linear infinite;
}
@keyframes fall-65 {
71.838% {
transform: translate(81.5582vw, 71.838vh) scale(0.505);
}
to {
transform: translate(80.5747vw, 100vh) scale(0.505);
}
}
.snow:nth-child(66) {
opacity: 0.6807;
transform: translate(27.1372vw, -10px) scale(0.206);
animation: fall-66 14s -19s linear infinite;
}
@keyframes fall-66 {
65.844% {
transform: translate(29.0641vw, 65.844vh) scale(0.206);
}
to {
transform: translate(28.10065vw, 100vh) scale(0.206);
}
}
.snow:nth-child(67) {
opacity: 0.6075;
transform: translate(60.9274vw, -10px) scale(0.7755);
animation: fall-67 26s -5s linear infinite;
}
@keyframes fall-67 {
50.141% {
transform: translate(68.2839vw, 50.141vh) scale(0.7755);
}
to {
transform: translate(64.60565vw, 100vh) scale(0.7755);
}
}
.snow:nth-child(68) {
opacity: 0.9158;
transform: translate(61.0379vw, -10px) scale(0.43);
animation: fall-68 30s -21s linear infinite;
}
@keyframes fall-68 {
38.972% {
transform: translate(54.6723vw, 38.972vh) scale(0.43);
}
to {
transform: translate(57.8551vw, 100vh) scale(0.43);
}
}
.snow:nth-child(69) {
opacity: 0.6737;
transform: translate(60.795vw, -10px) scale(0.6368);
animation: fall-69 16s -22s linear infinite;
}
@keyframes fall-69 {
43.271% {
transform: translate(68.2492vw, 43.271vh) scale(0.6368);
}
to {
transform: translate(64.5221vw, 100vh) scale(0.6368);
}
}
.snow:nth-child(70) {
opacity: 0.669;
transform: translate(17.0028vw, -10px) scale(0.2811);
animation: fall-70 21s -16s linear infinite;
}
@keyframes fall-70 {
34.955% {
transform: translate(24.456vw, 34.955vh) scale(0.2811);
}
to {
transform: translate(20.7294vw, 100vh) scale(0.2811);
}
}
.snow:nth-child(71) {
opacity: 0.4462;
transform: translate(87.3744vw, -10px) scale(0.2225);
animation: fall-71 15s -10s linear infinite;
}
@keyframes fall-71 {
74.72% {
transform: translate(86.5936vw, 74.72vh) scale(0.2225);
}
to {
transform: translate(86.984vw, 100vh) scale(0.2225);
}
}
.snow:nth-child(72) {
opacity: 0.9265;
transform: translate(49.8377vw, -10px) scale(0.0405);
animation: fall-72 19s -21s linear infinite;
}
@keyframes fall-72 {
35.322% {
transform: translate(46.3951vw, 35.322vh) scale(0.0405);
}
to {
transform: translate(48.1164vw, 100vh) scale(0.0405);
}
}
.snow:nth-child(73) {
opacity: 0.2768;
transform: translate(24.577vw, -10px) scale(0.5205);
animation: fall-73 10s -6s linear infinite;
}
@keyframes fall-73 {
60.112% {
transform: translate(33.0685vw, 60.112vh) scale(0.5205);
}
to {
transform: translate(28.82275vw, 100vh) scale(0.5205);
}
}
.snow:nth-child(74) {
opacity: 0.9124;
transform: translate(5.5325vw, -10px) scale(0.7605);
animation: fall-74 10s -29s linear infinite;
}
@keyframes fall-74 {
73.574% {
transform: translate(-4.412vw, 73.574vh) scale(0.7605);
}
to {
transform: translate(0.56025vw, 100vh) scale(0.7605);
}
}
.snow:nth-child(75) {
opacity: 0.1776;
transform: translate(69.5844vw, -10px) scale(0.4797);
animation: fall-75 20s -14s linear infinite;
}
@keyframes fall-75 {
52.131% {
transform: translate(71.5793vw, 52.131vh) scale(0.4797);
}
to {
transform: translate(70.58185vw, 100vh) scale(0.4797);
}
}
.snow:nth-child(76) {
opacity: 0.7843;
transform: translate(50.0768vw, -10px) scale(0.1243);
animation: fall-76 18s -7s linear infinite;
}
@keyframes fall-76 {
37.814% {
transform: translate(49.5028vw, 37.814vh) scale(0.1243);
}
to {
transform: translate(49.7898vw, 100vh) scale(0.1243);
}
}
.snow:nth-child(77) {
opacity: 0.5105;
transform: translate(77.2644vw, -10px) scale(0.2423);
animation: fall-77 17s -2s linear infinite;
}
@keyframes fall-77 {
77.206% {
transform: translate(77.2474vw, 77.206vh) scale(0.2423);
}
to {
transform: translate(77.2559vw, 100vh) scale(0.2423);
}
}
.snow:nth-child(78) {
opacity: 0.6212;
transform: translate(32.8573vw, -10px) scale(0.3518);
animation: fall-78 23s -15s linear infinite;
}
@keyframes fall-78 {
78.862% {
transform: translate(29.4171vw, 78.862vh) scale(0.3518);
}
to {
transform: translate(31.1372vw, 100vh) scale(0.3518);
}
}
.snow:nth-child(79) {
opacity: 0.2642;
transform: translate(47.2086vw, -10px) scale(0.1922);
animation: fall-79 28s -12s linear infinite;
}
@keyframes fall-79 {
65.447% {
transform: translate(40.0025vw, 65.447vh) scale(0.1922);
}
to {
transform: translate(43.60555vw, 100vh) scale(0.1922);
}
}
.snow:nth-child(80) {
opacity: 0.0466;
transform: translate(50.2078vw, -10px) scale(0.9117);
animation: fall-80 28s -26s linear infinite;
}
@keyframes fall-80 {
51.754% {
transform: translate(42.8848vw, 51.754vh) scale(0.9117);
}
to {
transform: translate(46.5463vw, 100vh) scale(0.9117);
}
}
.snow:nth-child(81) {
opacity: 0.7581;
transform: translate(86.4193vw, -10px) scale(0.8939);
animation: fall-81 27s -8s linear infinite;
}
@keyframes fall-81 {
78.685% {
transform: translate(77.4869vw, 78.685vh) scale(0.8939);
}
to {
transform: translate(81.9531vw, 100vh) scale(0.8939);
}
}
.snow:nth-child(82) {
opacity: 0.3691;
transform: translate(19.5338vw, -10px) scale(0.1502);
animation: fall-82 13s -9s linear infinite;
}
@keyframes fall-82 {
43.523% {
transform: translate(21.8149vw, 43.523vh) scale(0.1502);
}
to {
transform: translate(20.67435vw, 100vh) scale(0.1502);
}
}
.snow:nth-child(83) {
opacity: 0.0664;
transform: translate(49.9972vw, -10px) scale(0.9395);
animation: fall-83 26s -3s linear infinite;
}
@keyframes fall-83 {
52.244% {
transform: translate(55.2988vw, 52.244vh) scale(0.9395);
}
to {
transform: translate(52.648vw, 100vh) scale(0.9395);
}
}
.snow:nth-child(84) {
opacity: 0.1633;
transform: translate(94.7739vw, -10px) scale(0.1944);
animation: fall-84 27s -2s linear infinite;
}
@keyframes fall-84 {
48.799% {
transform: translate(98.5078vw, 48.799vh) scale(0.1944);
}
to {
transform: translate(96.64085vw, 100vh) scale(0.1944);
}
}
.snow:nth-child(85) {
opacity: 0.7454;
transform: translate(90.2258vw, -10px) scale(0.4714);
animation: fall-85 18s -16s linear infinite;
}
@keyframes fall-85 {
36.6% {
transform: translate(93.098vw, 36.6vh) scale(0.4714);
}
to {
transform: translate(91.6619vw, 100vh) scale(0.4714);
}
}
.snow:nth-child(86) {
opacity: 0.5237;
transform: translate(83.6927vw, -10px) scale(0.7168);
animation: fall-86 28s -10s linear infinite;
}
@keyframes fall-86 {
33.148% {
transform: translate(81.6137vw, 33.148vh) scale(0.7168);
}
to {
transform: translate(82.6532vw, 100vh) scale(0.7168);
}
}
.snow:nth-child(87) {
opacity: 0.2123;
transform: translate(94.7333vw, -10px) scale(0.3411);
animation: fall-87 29s -25s linear infinite;
}
@keyframes fall-87 {
75.675% {
transform: translate(94.1165vw, 75.675vh) scale(0.3411);
}
to {
transform: translate(94.4249vw, 100vh) scale(0.3411);
}
}
.snow:nth-child(88) {
opacity: 0.2405;
transform: translate(33.4726vw, -10px) scale(0.0629);
animation: fall-88 16s -10s linear infinite;
}
@keyframes fall-88 {
62.371% {
transform: translate(30.1223vw, 62.371vh) scale(0.0629);
}
to {
transform: translate(31.79745vw, 100vh) scale(0.0629);
}
}
.snow:nth-child(89) {
opacity: 0.355;
transform: translate(8.1022vw, -10px) scale(0.8278);
animation: fall-89 25s -26s linear infinite;
}
@keyframes fall-89 {
69.946% {
transform: translate(6.9452vw, 69.946vh) scale(0.8278);
}
to {
transform: translate(7.5237vw, 100vh) scale(0.8278);
}
}
.snow:nth-child(90) {
opacity: 0.2396;
transform: translate(99.973vw, -10px) scale(0.3284);
animation: fall-90 23s -24s linear infinite;
}
@keyframes fall-90 {
51.853% {
transform: translate(103.2128vw, 51.853vh) scale(0.3284);
}
to {
transform: translate(101.5929vw, 100vh) scale(0.3284);
}
}
.snow:nth-child(91) {
opacity: 0.7873;
transform: translate(55.8365vw, -10px) scale(0.3918);
animation: fall-91 18s -12s linear infinite;
}
@keyframes fall-91 {
30.482% {
transform: translate(64.5725vw, 30.482vh) scale(0.3918);
}
to {
transform: translate(60.2045vw, 100vh) scale(0.3918);
}
}
.snow:nth-child(92) {
opacity: 0.8948;
transform: translate(26.168vw, -10px) scale(0.1649);
animation: fall-92 21s -18s linear infinite;
}
@keyframes fall-92 {
69.867% {
transform: translate(18.7967vw, 69.867vh) scale(0.1649);
}
to {
transform: translate(22.48235vw, 100vh) scale(0.1649);
}
}
.snow:nth-child(93) {
opacity: 0.4821;
transform: translate(7.3083vw, -10px) scale(0.0653);
animation: fall-93 10s -15s linear infinite;
}
@keyframes fall-93 {
42.54% {
transform: translate(1.3919vw, 42.54vh) scale(0.0653);
}
to {
transform: translate(4.3501vw, 100vh) scale(0.0653);
}
}
.snow:nth-child(94) {
opacity: 0.5404;
transform: translate(46.2907vw, -10px) scale(0.3996);
animation: fall-94 28s -7s linear infinite;
}
@keyframes fall-94 {
50.308% {
transform: translate(55.4656vw, 50.308vh) scale(0.3996);
}
to {
transform: translate(50.87815vw, 100vh) scale(0.3996);
}
}
.snow:nth-child(95) {
opacity: 0.7942;
transform: translate(47.4447vw, -10px) scale(0.8444);
animation: fall-95 21s -18s linear infinite;
}
@keyframes fall-95 {
32.245% {
transform: translate(56.5111vw, 32.245vh) scale(0.8444);
}
to {
transform: translate(51.9779vw, 100vh) scale(0.8444);
}
}
.snow:nth-child(96) {
opacity: 0.3273;
transform: translate(25.7766vw, -10px) scale(0.1546);
animation: fall-96 19s -27s linear infinite;
}
@keyframes fall-96 {
39.137% {
transform: translate(32.856vw, 39.137vh) scale(0.1546);
}
to {
transform: translate(29.3163vw, 100vh) scale(0.1546);
}
}
.snow:nth-child(97) {
opacity: 0.4213;
transform: translate(17.8237vw, -10px) scale(0.7686);
animation: fall-97 21s -1s linear infinite;
}
@keyframes fall-97 {
55.066% {
transform: translate(19.9236vw, 55.066vh) scale(0.7686);
}
to {
transform: translate(18.87365vw, 100vh) scale(0.7686);
}
}
.snow:nth-child(98) {
opacity: 0.545;
transform: translate(69.363vw, -10px) scale(0.0906);
animation: fall-98 29s -10s linear infinite;
}
@keyframes fall-98 {
41.789% {
transform: translate(70.0663vw, 41.789vh) scale(0.0906);
}
to {
transform: translate(69.71465vw, 100vh) scale(0.0906);
}
}
.snow:nth-child(99) {
opacity: 0.5684;
transform: translate(75.2252vw, -10px) scale(0.3095);
animation: fall-99 20s -6s linear infinite;
}
@keyframes fall-99 {
77.261% {
transform: translate(67.8784vw, 77.261vh) scale(0.3095);
}
to {
transform: translate(71.5518vw, 100vh) scale(0.3095);
}
}
.snow:nth-child(100) {
opacity: 0.68;
transform: translate(55.0443vw, -10px) scale(0.5702);
animation: fall-100 16s -26s linear infinite;
}
@keyframes fall-100 {
66.924% {
transform: translate(47.1015vw, 66.924vh) scale(0.5702);
}
to {
transform: translate(51.0729vw, 100vh) scale(0.5702);
}
}
.snow:nth-child(101) {
opacity: 0.728;
transform: translate(7.1497vw, -10px) scale(0.9474);
animation: fall-101 16s -15s linear infinite;
}
@keyframes fall-101 {
53.453% {
transform: translate(7.0444vw, 53.453vh) scale(0.9474);
}
to {
transform: translate(7.09705vw, 100vh) scale(0.9474);
}
}
.snow:nth-child(102) {
opacity: 0.0136;
transform: translate(0.8542vw, -10px) scale(0.8107);
animation: fall-102 25s -19s linear infinite;
}
@keyframes fall-102 {
46.211% {
transform: translate(5.3656vw, 46.211vh) scale(0.8107);
}
to {
transform: translate(3.1099vw, 100vh) scale(0.8107);
}
}
.snow:nth-child(103) {
opacity: 0.4118;
transform: translate(3.7278vw, -10px) scale(0.6604);
animation: fall-103 27s -14s linear infinite;
}
@keyframes fall-103 {
62.6% {
transform: translate(-4.7629vw, 62.6vh) scale(0.6604);
}
to {
transform: translate(-0.51755vw, 100vh) scale(0.6604);
}
}
.snow:nth-child(104) {
opacity: 0.5646;
transform: translate(75.8068vw, -10px) scale(0.6625);
animation: fall-104 15s -9s linear infinite;
}
@keyframes fall-104 {
61.699% {
transform: translate(74.5617vw, 61.699vh) scale(0.6625);
}
to {
transform: translate(75.18425vw, 100vh) scale(0.6625);
}
}
.snow:nth-child(105) {
opacity: 0.4249;
transform: translate(9.537vw, -10px) scale(0.0392);
animation: fall-105 30s -30s linear infinite;
}
@keyframes fall-105 {
32.859% {
transform: translate(8.5029vw, 32.859vh) scale(0.0392);
}
to {
transform: translate(9.01995vw, 100vh) scale(0.0392);
}
}
.snow:nth-child(106) {
opacity: 0.2676;
transform: translate(2.0782vw, -10px) scale(0.815);
animation: fall-106 13s -26s linear infinite;
}
@keyframes fall-106 {
32.91% {
transform: translate(-6.5765vw, 32.91vh) scale(0.815);
}
to {
transform: translate(-2.24915vw, 100vh) scale(0.815);
}
}
.snow:nth-child(107) {
opacity: 0.4252;
transform: translate(40.8688vw, -10px) scale(0.7859);
animation: fall-107 17s -22s linear infinite;
}
@keyframes fall-107 {
56.21% {
transform: translate(45.675vw, 56.21vh) scale(0.7859);
}
to {
transform: translate(43.2719vw, 100vh) scale(0.7859);
}
}
.snow:nth-child(108) {
opacity: 0.9851;
transform: translate(23.8341vw, -10px) scale(0.0268);
animation: fall-108 20s -8s linear infinite;
}
@keyframes fall-108 {
76.557% {
transform: translate(21.0382vw, 76.557vh) scale(0.0268);
}
to {
transform: translate(22.43615vw, 100vh) scale(0.0268);
}
}
.snow:nth-child(109) {
opacity: 0.4193;
transform: translate(7.0609vw, -10px) scale(0.2132);
animation: fall-109 14s -28s linear infinite;
}
@keyframes fall-109 {
50.586% {
transform: translate(-2.3578vw, 50.586vh) scale(0.2132);
}
to {
transform: translate(2.35155vw, 100vh) scale(0.2132);
}
}
.snow:nth-child(110) {
opacity: 0.5564;
transform: translate(79.3877vw, -10px) scale(0.7549);
animation: fall-110 26s -23s linear infinite;
}
@keyframes fall-110 {
70.429% {
transform: translate(84.1722vw, 70.429vh) scale(0.7549);
}
to {
transform: translate(81.77995vw, 100vh) scale(0.7549);
}
}
.snow:nth-child(111) {
opacity: 0.4711;
transform: translate(83.3573vw, -10px) scale(0.3464);
animation: fall-111 15s -22s linear infinite;
}
@keyframes fall-111 {
53.898% {
transform: translate(74.578vw, 53.898vh) scale(0.3464);
}
to {
transform: translate(78.96765vw, 100vh) scale(0.3464);
}
}
.snow:nth-child(112) {
opacity: 0.092;
transform: translate(92.8619vw, -10px) scale(0.5917);
animation: fall-112 18s -20s linear infinite;
}
@keyframes fall-112 {
54.103% {
transform: translate(93.296vw, 54.103vh) scale(0.5917);
}
to {
transform: translate(93.07895vw, 100vh) scale(0.5917);
}
}
.snow:nth-child(113) {
opacity: 0.3532;
transform: translate(0.1842vw, -10px) scale(0.5068);
animation: fall-113 25s -25s linear infinite;
}
@keyframes fall-113 {
64.09% {
transform: translate(-5.6534vw, 64.09vh) scale(0.5068);
}
to {
transform: translate(-2.7346vw, 100vh) scale(0.5068);
}
}
.snow:nth-child(114) {
opacity: 0.2209;
transform: translate(39.0226vw, -10px) scale(0.954);
animation: fall-114 13s -28s linear infinite;
}
@keyframes fall-114 {
47.191% {
transform: translate(30.0576vw, 47.191vh) scale(0.954);
}
to {
transform: translate(34.5401vw, 100vh) scale(0.954);
}
}
.snow:nth-child(115) {
opacity: 0.3811;
transform: translate(99.3147vw, -10px) scale(0.6812);
animation: fall-115 14s -18s linear infinite;
}
@keyframes fall-115 {
72.3% {
transform: translate(90.8071vw, 72.3vh) scale(0.6812);
}
to {
transform: translate(95.0609vw, 100vh) scale(0.6812);
}
}
.snow:nth-child(116) {
opacity: 0.7523;
transform: translate(65.9684vw, -10px) scale(0.9377);
animation: fall-116 18s -18s linear infinite;
}
@keyframes fall-116 {
74.734% {
transform: translate(68.3613vw, 74.734vh) scale(0.9377);
}
to {
transform: translate(67.16485vw, 100vh) scale(0.9377);
}
}
.snow:nth-child(117) {
opacity: 0.4593;
transform: translate(30.9104vw, -10px) scale(0.9904);
animation: fall-117 29s -16s linear infinite;
}
@keyframes fall-117 {
31.042% {
transform: translate(22.2634vw, 31.042vh) scale(0.9904);
}
to {
transform: translate(26.5869vw, 100vh) scale(0.9904);
}
}
.snow:nth-child(118) {
opacity: 0.6805;
transform: translate(98.0067vw, -10px) scale(0.6499);
animation: fall-118 30s -24s linear infinite;
}
@keyframes fall-118 {
51.202% {
transform: translate(93.113vw, 51.202vh) scale(0.6499);
}
to {
transform: translate(95.55985vw, 100vh) scale(0.6499);
}
}
.snow:nth-child(119) {
opacity: 0.8155;
transform: translate(23.7588vw, -10px) scale(0.4556);
animation: fall-119 20s -8s linear infinite;
}
@keyframes fall-119 {
34.548% {
transform: translate(23.2162vw, 34.548vh) scale(0.4556);
}
to {
transform: translate(23.4875vw, 100vh) scale(0.4556);
}
}
.snow:nth-child(120) {
opacity: 0.6291;
transform: translate(27.8009vw, -10px) scale(0.5844);
animation: fall-120 22s -27s linear infinite;
}
@keyframes fall-120 {
50.865% {
transform: translate(29.809vw, 50.865vh) scale(0.5844);
}
to {
transform: translate(28.80495vw, 100vh) scale(0.5844);
}
}
.snow:nth-child(121) {
opacity: 0.5407;
transform: translate(82.9006vw, -10px) scale(0.4467);
animation: fall-121 25s -13s linear infinite;
}
@keyframes fall-121 {
64.848% {
transform: translate(80.8688vw, 64.848vh) scale(0.4467);
}
to {
transform: translate(81.8847vw, 100vh) scale(0.4467);
}
}
.snow:nth-child(122) {
opacity: 0.1685;
transform: translate(42.4908vw, -10px) scale(0.9201);
animation: fall-122 22s -19s linear infinite;
}
@keyframes fall-122 {
66.927% {
transform: translate(39.7242vw, 66.927vh) scale(0.9201);
}
to {
transform: translate(41.1075vw, 100vh) scale(0.9201);
}
}
.snow:nth-child(123) {
opacity: 0.3496;
transform: translate(94.1227vw, -10px) scale(0.2412);
animation: fall-123 10s -4s linear infinite;
}
@keyframes fall-123 {
44.709% {
transform: translate(84.9508vw, 44.709vh) scale(0.2412);
}
to {
transform: translate(89.53675vw, 100vh) scale(0.2412);
}
}
.snow:nth-child(124) {
opacity: 0.2778;
transform: translate(97.624vw, -10px) scale(0.3911);
animation: fall-124 26s -16s linear infinite;
}
@keyframes fall-124 {
70.387% {
transform: translate(100.639vw, 70.387vh) scale(0.3911);
}
to {
transform: translate(99.1315vw, 100vh) scale(0.3911);
}
}
.snow:nth-child(125) {
opacity: 0.8844;
transform: translate(8.5916vw, -10px) scale(0.5043);
animation: fall-125 13s -18s linear infinite;
}
@keyframes fall-125 {
41.798% {
transform: translate(15.1782vw, 41.798vh) scale(0.5043);
}
to {
transform: translate(11.8849vw, 100vh) scale(0.5043);
}
}
.snow:nth-child(126) {
opacity: 0.4164;
transform: translate(29.8823vw, -10px) scale(0.3923);
animation: fall-126 28s -4s linear infinite;
}
@keyframes fall-126 {
50.921% {
transform: translate(20.5156vw, 50.921vh) scale(0.3923);
}
to {
transform: translate(25.19895vw, 100vh) scale(0.3923);
}
}
.snow:nth-child(127) {
opacity: 0.4286;
transform: translate(77.8638vw, -10px) scale(0.4605);
animation: fall-127 16s -5s linear infinite;
}
@keyframes fall-127 {
59.525% {
transform: translate(71.6812vw, 59.525vh) scale(0.4605);
}
to {
transform: translate(74.7725vw, 100vh) scale(0.4605);
}
}
.snow:nth-child(128) {
opacity: 0.1666;
transform: translate(95.0023vw, -10px) scale(0.7442);
animation: fall-128 19s -15s linear infinite;
}
@keyframes fall-128 {
50.76% {
transform: translate(100.6046vw, 50.76vh) scale(0.7442);
}
to {
transform: translate(97.80345vw, 100vh) scale(0.7442);
}
}
.snow:nth-child(129) {
opacity: 0.6356;
transform: translate(56.7549vw, -10px) scale(0.0165);
animation: fall-129 30s -27s linear infinite;
}
@keyframes fall-129 {
37.78% {
transform: translate(52.803vw, 37.78vh) scale(0.0165);
}
to {
transform: translate(54.77895vw, 100vh) scale(0.0165);
}
}
.snow:nth-child(130) {
opacity: 0.0807;
transform: translate(23.8144vw, -10px) scale(0.6303);
animation: fall-130 18s -13s linear infinite;
}
@keyframes fall-130 {
59.986% {
transform: translate(18.9614vw, 59.986vh) scale(0.6303);
}
to {
transform: translate(21.3879vw, 100vh) scale(0.6303);
}
}
.snow:nth-child(131) {
opacity: 0.0108;
transform: translate(26.7073vw, -10px) scale(0.9961);
animation: fall-131 25s -19s linear infinite;
}
@keyframes fall-131 {
39.363% {
transform: translate(36.0034vw, 39.363vh) scale(0.9961);
}
to {
transform: translate(31.35535vw, 100vh) scale(0.9961);
}
}
.snow:nth-child(132) {
opacity: 0.1789;
transform: translate(58.3813vw, -10px) scale(0.2698);
animation: fall-132 10s -16s linear infinite;
}
@keyframes fall-132 {
66.053% {
transform: translate(53.5454vw, 66.053vh) scale(0.2698);
}
to {
transform: translate(55.96335vw, 100vh) scale(0.2698);
}
}
.snow:nth-child(133) {
opacity: 0.5255;
transform: translate(56.3896vw, -10px) scale(0.012);
animation: fall-133 13s -2s linear infinite;
}
@keyframes fall-133 {
54.823% {
transform: translate(54.0488vw, 54.823vh) scale(0.012);
}
to {
transform: translate(55.2192vw, 100vh) scale(0.012);
}
}
.snow:nth-child(134) {
opacity: 0.5919;
transform: translate(38.524vw, -10px) scale(0.9496);
animation: fall-134 14s -8s linear infinite;
}
@keyframes fall-134 {
48.684% {
transform: translate(37.7501vw, 48.684vh) scale(0.9496);
}
to {
transform: translate(38.13705vw, 100vh) scale(0.9496);
}
}
.snow:nth-child(135) {
opacity: 0.8231;
transform: translate(91.3179vw, -10px) scale(0.0323);
animation: fall-135 10s -5s linear infinite;
}
@keyframes fall-135 {
37.372% {
transform: translate(85.3848vw, 37.372vh) scale(0.0323);
}
to {
transform: translate(88.35135vw, 100vh) scale(0.0323);
}
}
.snow:nth-child(136) {
opacity: 0.9186;
transform: translate(24.2006vw, -10px) scale(0.5746);
animation: fall-136 17s -7s linear infinite;
}
@keyframes fall-136 {
42.99% {
transform: translate(24.2062vw, 42.99vh) scale(0.5746);
}
to {
transform: translate(24.2034vw, 100vh) scale(0.5746);
}
}
.snow:nth-child(137) {
opacity: 0.3908;
transform: translate(3.2746vw, -10px) scale(0.5078);
animation: fall-137 11s -8s linear infinite;
}
@keyframes fall-137 {
44.787% {
transform: translate(13.0844vw, 44.787vh) scale(0.5078);
}
to {
transform: translate(8.1795vw, 100vh) scale(0.5078);
}
}
.snow:nth-child(138) {
opacity: 0.8879;
transform: translate(91.6703vw, -10px) scale(0.313);
animation: fall-138 30s -16s linear infinite;
}
@keyframes fall-138 {
57.053% {
transform: translate(100.3267vw, 57.053vh) scale(0.313);
}
to {
transform: translate(95.9985vw, 100vh) scale(0.313);
}
}
.snow:nth-child(139) {
opacity: 0.5233;
transform: translate(12.6446vw, -10px) scale(0.5428);
animation: fall-139 21s -10s linear infinite;
}
@keyframes fall-139 {
48.892% {
transform: translate(16.1148vw, 48.892vh) scale(0.5428);
}
to {
transform: translate(14.3797vw, 100vh) scale(0.5428);
}
}
.snow:nth-child(140) {
opacity: 0.1065;
transform: translate(11.5281vw, -10px) scale(0.963);
animation: fall-140 15s -14s linear infinite;
}
@keyframes fall-140 {
31.357% {
transform: translate(9.7894vw, 31.357vh) scale(0.963);
}
to {
transform: translate(10.65875vw, 100vh) scale(0.963);
}
}
.snow:nth-child(141) {
opacity: 0.0998;
transform: translate(72.8877vw, -10px) scale(0.2443);
animation: fall-141 23s -27s linear infinite;
}
@keyframes fall-141 {
37.131% {
transform: translate(79.1743vw, 37.131vh) scale(0.2443);
}
to {
transform: translate(76.031vw, 100vh) scale(0.2443);
}
}
.snow:nth-child(142) {
opacity: 0.0836;
transform: translate(30.301vw, -10px) scale(0.6409);
animation: fall-142 30s -21s linear infinite;
}
@keyframes fall-142 {
50.822% {
transform: translate(33.9907vw, 50.822vh) scale(0.6409);
}
to {
transform: translate(32.14585vw, 100vh) scale(0.6409);
}
}
.snow:nth-child(143) {
opacity: 0.7322;
transform: translate(94.5775vw, -10px) scale(0.7108);
animation: fall-143 11s -19s linear infinite;
}
@keyframes fall-143 {
33.047% {
transform: translate(90.3406vw, 33.047vh) scale(0.7108);
}
to {
transform: translate(92.45905vw, 100vh) scale(0.7108);
}
}
.snow:nth-child(144) {
opacity: 0.0832;
transform: translate(84.3181vw, -10px) scale(0.3549);
animation: fall-144 27s -6s linear infinite;
}
@keyframes fall-144 {
61.906% {
transform: translate(84.1464vw, 61.906vh) scale(0.3549);
}
to {
transform: translate(84.23225vw, 100vh) scale(0.3549);
}
}
.snow:nth-child(145) {
opacity: 0.3541;
transform: translate(95.1943vw, -10px) scale(0.2401);
animation: fall-145 15s -1s linear infinite;
}
@keyframes fall-145 {
59.711% {
transform: translate(104.9135vw, 59.711vh) scale(0.2401);
}
to {
transform: translate(100.0539vw, 100vh) scale(0.2401);
}
}
.snow:nth-child(146) {
opacity: 0.393;
transform: translate(38.4951vw, -10px) scale(0.5799);
animation: fall-146 17s -19s linear infinite;
}
@keyframes fall-146 {
40.905% {
transform: translate(46.6169vw, 40.905vh) scale(0.5799);
}
to {
transform: translate(42.556vw, 100vh) scale(0.5799);
}
}
.snow:nth-child(147) {
opacity: 0.3084;
transform: translate(39.1066vw, -10px) scale(0.2121);
animation: fall-147 30s -13s linear infinite;
}
@keyframes fall-147 {
33.949% {
transform: translate(43.2307vw, 33.949vh) scale(0.2121);
}
to {
transform: translate(41.16865vw, 100vh) scale(0.2121);
}
}
.snow:nth-child(148) {
opacity: 0.4842;
transform: translate(37.9617vw, -10px) scale(0.5881);
animation: fall-148 21s -27s linear infinite;
}
@keyframes fall-148 {
43.613% {
transform: translate(29.7221vw, 43.613vh) scale(0.5881);
}
to {
transform: translate(33.8419vw, 100vh) scale(0.5881);
}
}
.snow:nth-child(149) {
opacity: 0.3126;
transform: translate(37.7707vw, -10px) scale(0.194);
animation: fall-149 26s -13s linear infinite;
}
@keyframes fall-149 {
32.885% {
transform: translate(42.4799vw, 32.885vh) scale(0.194);
}
to {
transform: translate(40.1253vw, 100vh) scale(0.194);
}
}
.snow:nth-child(150) {
opacity: 0.9904;
transform: translate(28.1352vw, -10px) scale(0.2424);
animation: fall-150 14s -16s linear infinite;
}
@keyframes fall-150 {
79.762% {
transform: translate(36.7091vw, 79.762vh) scale(0.2424);
}
to {
transform: translate(32.42215vw, 100vh) scale(0.2424);
}
}
.snow:nth-child(151) {
opacity: 0.5965;
transform: translate(53.6682vw, -10px) scale(0.1397);
animation: fall-151 23s -7s linear infinite;
}
@keyframes fall-151 {
34.39% {
transform: translate(60.6132vw, 34.39vh) scale(0.1397);
}
to {
transform: translate(57.1407vw, 100vh) scale(0.1397);
}
}
.snow:nth-child(152) {
opacity: 0.0709;
transform: translate(6.9743vw, -10px) scale(0.3543);
animation: fall-152 23s -25s linear infinite;
}
@keyframes fall-152 {
68.682% {
transform: translate(8.4014vw, 68.682vh) scale(0.3543);
}
to {
transform: translate(7.68785vw, 100vh) scale(0.3543);
}
}
.snow:nth-child(153) {
opacity: 0.4982;
transform: translate(89.7799vw, -10px) scale(0.3269);
animation: fall-153 27s -24s linear infinite;
}
@keyframes fall-153 {
48.737% {
transform: translate(81.2114vw, 48.737vh) scale(0.3269);
}
to {
transform: translate(85.49565vw, 100vh) scale(0.3269);
}
}
.snow:nth-child(154) {
opacity: 0.3677;
transform: translate(36.2667vw, -10px) scale(0.5452);
animation: fall-154 10s -3s linear infinite;
}
@keyframes fall-154 {
45.861% {
transform: translate(41.8839vw, 45.861vh) scale(0.5452);
}
to {
transform: translate(39.0753vw, 100vh) scale(0.5452);
}
}
.snow:nth-child(155) {
opacity: 0.8058;
transform: translate(46.5393vw, -10px) scale(0.1968);
animation: fall-155 20s -10s linear infinite;
}
@keyframes fall-155 {
46.758% {
transform: translate(42.7829vw, 46.758vh) scale(0.1968);
}
to {
transform: translate(44.6611vw, 100vh) scale(0.1968);
}
}
.snow:nth-child(156) {
opacity: 0.1638;
transform: translate(61.9694vw, -10px) scale(0.3648);
animation: fall-156 29s -10s linear infinite;
}
@keyframes fall-156 {
66.575% {
transform: translate(60.3797vw, 66.575vh) scale(0.3648);
}
to {
transform: translate(61.17455vw, 100vh) scale(0.3648);
}
}
.snow:nth-child(157) {
opacity: 0.0538;
transform: translate(9.5109vw, -10px) scale(0.8548);
animation: fall-157 30s -21s linear infinite;
}
@keyframes fall-157 {
71.829% {
transform: translate(1.0533vw, 71.829vh) scale(0.8548);
}
to {
transform: translate(5.2821vw, 100vh) scale(0.8548);
}
}
.snow:nth-child(158) {
opacity: 0.6901;
transform: translate(30.5318vw, -10px) scale(0.4707);
animation: fall-158 12s -17s linear infinite;
}
@keyframes fall-158 {
66.331% {
transform: translate(26.2651vw, 66.331vh) scale(0.4707);
}
to {
transform: translate(28.39845vw, 100vh) scale(0.4707);
}
}
.snow:nth-child(159) {
opacity: 0.2677;
transform: translate(4.4959vw, -10px) scale(0.1882);
animation: fall-159 10s -8s linear infinite;
}
@keyframes fall-159 {
52.968% {
transform: translate(-3.3137vw, 52.968vh) scale(0.1882);
}
to {
transform: translate(0.5911vw, 100vh) scale(0.1882);
}
}
.snow:nth-child(160) {
opacity: 0.4163;
transform: translate(49.3438vw, -10px) scale(0.159);
animation: fall-160 17s -19s linear infinite;
}
@keyframes fall-160 {
41.077% {
transform: translate(48.3686vw, 41.077vh) scale(0.159);
}
to {
transform: translate(48.8562vw, 100vh) scale(0.159);
}
}
.snow:nth-child(161) {
opacity: 0.5995;
transform: translate(55.0524vw, -10px) scale(0.9318);
animation: fall-161 22s -23s linear infinite;
}
@keyframes fall-161 {
45.809% {
transform: translate(48.4242vw, 45.809vh) scale(0.9318);
}
to {
transform: translate(51.7383vw, 100vh) scale(0.9318);
}
}
.snow:nth-child(162) {
opacity: 0.599;
transform: translate(86.7136vw, -10px) scale(0.3663);
animation: fall-162 27s -21s linear infinite;
}
@keyframes fall-162 {
79.197% {
transform: translate(87.0787vw, 79.197vh) scale(0.3663);
}
to {
transform: translate(86.89615vw, 100vh) scale(0.3663);
}
}
.snow:nth-child(163) {
opacity: 0.5628;
transform: translate(95.1809vw, -10px) scale(0.1884);
animation: fall-163 29s -9s linear infinite;
}
@keyframes fall-163 {
68.012% {
transform: translate(102.3298vw, 68.012vh) scale(0.1884);
}
to {
transform: translate(98.75535vw, 100vh) scale(0.1884);
}
}
.snow:nth-child(164) {
opacity: 0.1345;
transform: translate(55.8176vw, -10px) scale(0.7898);
animation: fall-164 17s -30s linear infinite;
}
@keyframes fall-164 {
79.163% {
transform: translate(47.9184vw, 79.163vh) scale(0.7898);
}
to {
transform: translate(51.868vw, 100vh) scale(0.7898);
}
}
.snow:nth-child(165) {
opacity: 0.0249;
transform: translate(73.1533vw, -10px) scale(0.6727);
animation: fall-165 16s -3s linear infinite;
}
@keyframes fall-165 {
58.426% {
transform: translate(66.2696vw, 58.426vh) scale(0.6727);
}
to {
transform: translate(69.71145vw, 100vh) scale(0.6727);
}
}
.snow:nth-child(166) {
opacity: 0.2907;
transform: translate(90.4366vw, -10px) scale(0.4582);
animation: fall-166 29s -25s linear infinite;
}
@keyframes fall-166 {
55.119% {
transform: translate(94.8215vw, 55.119vh) scale(0.4582);
}
to {
transform: translate(92.62905vw, 100vh) scale(0.4582);
}
}
.snow:nth-child(167) {
opacity: 0.6711;
transform: translate(64.1012vw, -10px) scale(0.6432);
animation: fall-167 18s -23s linear infinite;
}
@keyframes fall-167 {
37.216% {
transform: translate(60.0468vw, 37.216vh) scale(0.6432);
}
to {
transform: translate(62.074vw, 100vh) scale(0.6432);
}
}
.snow:nth-child(168) {
opacity: 0.3078;
transform: translate(41.5909vw, -10px) scale(0.4461);
animation: fall-168 19s -4s linear infinite;
}
@keyframes fall-168 {
64.039% {
transform: translate(32.7062vw, 64.039vh) scale(0.4461);
}
to {
transform: translate(37.14855vw, 100vh) scale(0.4461);
}
}
.snow:nth-child(169) {
opacity: 0.2492;
transform: translate(15.6298vw, -10px) scale(0.8168);
animation: fall-169 24s -2s linear infinite;
}
@keyframes fall-169 {
64.261% {
transform: translate(17.2777vw, 64.261vh) scale(0.8168);
}
to {
transform: translate(16.45375vw, 100vh) scale(0.8168);
}
}
.snow:nth-child(170) {
opacity: 0.3808;
transform: translate(64.8625vw, -10px) scale(0.2005);
animation: fall-170 23s -24s linear infinite;
}
@keyframes fall-170 {
44.036% {
transform: translate(59.276vw, 44.036vh) scale(0.2005);
}
to {
transform: translate(62.06925vw, 100vh) scale(0.2005);
}
}
.snow:nth-child(171) {
opacity: 0.322;
transform: translate(18.7824vw, -10px) scale(0.8142);
animation: fall-171 30s -9s linear infinite;
}
@keyframes fall-171 {
72.372% {
transform: translate(22.8362vw, 72.372vh) scale(0.8142);
}
to {
transform: translate(20.8093vw, 100vh) scale(0.8142);
}
}
.snow:nth-child(172) {
opacity: 0.1455;
transform: translate(32.4341vw, -10px) scale(0.0889);
animation: fall-172 20s -11s linear infinite;
}
@keyframes fall-172 {
43.055% {
transform: translate(36.2103vw, 43.055vh) scale(0.0889);
}
to {
transform: translate(34.3222vw, 100vh) scale(0.0889);
}
}
.snow:nth-child(173) {
opacity: 0.526;
transform: translate(35.1739vw, -10px) scale(0.7692);
animation: fall-173 12s -28s linear infinite;
}
@keyframes fall-173 {
37.239% {
transform: translate(27.2261vw, 37.239vh) scale(0.7692);
}
to {
transform: translate(31.2vw, 100vh) scale(0.7692);
}
}
.snow:nth-child(174) {
opacity: 0.8796;
transform: translate(6.371vw, -10px) scale(0.4251);
animation: fall-174 29s -24s linear infinite;
}
@keyframes fall-174 {
42.365% {
transform: translate(8.0313vw, 42.365vh) scale(0.4251);
}
to {
transform: translate(7.20115vw, 100vh) scale(0.4251);
}
}
.snow:nth-child(175) {
opacity: 0.4068;
transform: translate(34.1783vw, -10px) scale(0.8755);
animation: fall-175 24s -11s linear infinite;
}
@keyframes fall-175 {
70.003% {
transform: translate(31.2679vw, 70.003vh) scale(0.8755);
}
to {
transform: translate(32.7231vw, 100vh) scale(0.8755);
}
}
.snow:nth-child(176) {
opacity: 0.46;
transform: translate(93.3663vw, -10px) scale(0.51);
animation: fall-176 22s -8s linear infinite;
}
@keyframes fall-176 {
49.979% {
transform: translate(91.0472vw, 49.979vh) scale(0.51);
}
to {
transform: translate(92.20675vw, 100vh) scale(0.51);
}
}
.snow:nth-child(177) {
opacity: 0.056;
transform: translate(56.2422vw, -10px) scale(0.6688);
animation: fall-177 14s -14s linear infinite;
}
@keyframes fall-177 {
70.733% {
transform: translate(47.5983vw, 70.733vh) scale(0.6688);
}
to {
transform: translate(51.92025vw, 100vh) scale(0.6688);
}
}
.snow:nth-child(178) {
opacity: 0.6798;
transform: translate(88.3525vw, -10px) scale(0.4154);
animation: fall-178 13s -21s linear infinite;
}
@keyframes fall-178 {
43.452% {
transform: translate(97.7105vw, 43.452vh) scale(0.4154);
}
to {
transform: translate(93.0315vw, 100vh) scale(0.4154);
}
}
.snow:nth-child(179) {
opacity: 0.8587;
transform: translate(91.7405vw, -10px) scale(0.7427);
animation: fall-179 28s -16s linear infinite;
}
@keyframes fall-179 {
73.448% {
transform: translate(98.89vw, 73.448vh) scale(0.7427);
}
to {
transform: translate(95.31525vw, 100vh) scale(0.7427);
}
}
.snow:nth-child(180) {
opacity: 0.8337;
transform: translate(6.9036vw, -10px) scale(0.3296);
animation: fall-180 22s -24s linear infinite;
}
@keyframes fall-180 {
32.537% {
transform: translate(9.4031vw, 32.537vh) scale(0.3296);
}
to {
transform: translate(8.15335vw, 100vh) scale(0.3296);
}
}
.snow:nth-child(181) {
opacity: 0.2254;
transform: translate(99.9027vw, -10px) scale(0.5088);
animation: fall-181 10s -4s linear infinite;
}
@keyframes fall-181 {
38.815% {
transform: translate(99.9583vw, 38.815vh) scale(0.5088);
}
to {
transform: translate(99.9305vw, 100vh) scale(0.5088);
}
}
.snow:nth-child(182) {
opacity: 0.9051;
transform: translate(92.4789vw, -10px) scale(0.7353);
animation: fall-182 28s -5s linear infinite;
}
@keyframes fall-182 {
30.786% {
transform: translate(99.5195vw, 30.786vh) scale(0.7353);
}
to {
transform: translate(95.9992vw, 100vh) scale(0.7353);
}
}
.snow:nth-child(183) {
opacity: 0.1404;
transform: translate(48.3069vw, -10px) scale(0.8861);
animation: fall-183 19s -30s linear infinite;
}
@keyframes fall-183 {
73.901% {
transform: translate(57.67vw, 73.901vh) scale(0.8861);
}
to {
transform: translate(52.98845vw, 100vh) scale(0.8861);
}
}
.snow:nth-child(184) {
opacity: 0.5916;
transform: translate(99.2259vw, -10px) scale(0.2453);
animation: fall-184 11s -15s linear infinite;
}
@keyframes fall-184 {
67.515% {
transform: translate(103.2978vw, 67.515vh) scale(0.2453);
}
to {
transform: translate(101.26185vw, 100vh) scale(0.2453);
}
}
.snow:nth-child(185) {
opacity: 0.9659;
transform: translate(23.7035vw, -10px) scale(0.5984);
animation: fall-185 12s -1s linear infinite;
}
@keyframes fall-185 {
63.349% {
transform: translate(29.259vw, 63.349vh) scale(0.5984);
}
to {
transform: translate(26.48125vw, 100vh) scale(0.5984);
}
}
.snow:nth-child(186) {
opacity: 0.5489;
transform: translate(53.6342vw, -10px) scale(0.4937);
animation: fall-186 15s -16s linear infinite;
}
@keyframes fall-186 {
56.705% {
transform: translate(51.4253vw, 56.705vh) scale(0.4937);
}
to {
transform: translate(52.52975vw, 100vh) scale(0.4937);
}
}
.snow:nth-child(187) {
opacity: 0.5169;
transform: translate(8.4231vw, -10px) scale(0.9776);
animation: fall-187 18s -6s linear infinite;
}
@keyframes fall-187 {
71.532% {
transform: translate(17.3601vw, 71.532vh) scale(0.9776);
}
to {
transform: translate(12.8916vw, 100vh) scale(0.9776);
}
}
.snow:nth-child(188) {
opacity: 0.2011;
transform: translate(29.6166vw, -10px) scale(0.7029);
animation: fall-188 28s -9s linear infinite;
}
@keyframes fall-188 {
36.012% {
transform: translate(31.9822vw, 36.012vh) scale(0.7029);
}
to {
transform: translate(30.7994vw, 100vh) scale(0.7029);
}
}
.snow:nth-child(189) {
opacity: 0.2943;
transform: translate(14.0724vw, -10px) scale(0.592);
animation: fall-189 26s -15s linear infinite;
}
@keyframes fall-189 {
39.727% {
transform: translate(22.2044vw, 39.727vh) scale(0.592);
}
to {
transform: translate(18.1384vw, 100vh) scale(0.592);
}
}
.snow:nth-child(190) {
opacity: 0.9789;
transform: translate(51.7581vw, -10px) scale(0.0287);
animation: fall-190 14s -27s linear infinite;
}
@keyframes fall-190 {
68.49% {
transform: translate(56.6233vw, 68.49vh) scale(0.0287);
}
to {
transform: translate(54.1907vw, 100vh) scale(0.0287);
}
}
.snow:nth-child(191) {
opacity: 0.5925;
transform: translate(90.054vw, -10px) scale(0.3182);
animation: fall-191 18s -13s linear infinite;
}
@keyframes fall-191 {
46.154% {
transform: translate(98.1936vw, 46.154vh) scale(0.3182);
}
to {
transform: translate(94.1238vw, 100vh) scale(0.3182);
}
}
.snow:nth-child(192) {
opacity: 0.425;
transform: translate(40.347vw, -10px) scale(0.7559);
animation: fall-192 17s -29s linear infinite;
}
@keyframes fall-192 {
57.013% {
transform: translate(44.7134vw, 57.013vh) scale(0.7559);
}
to {
transform: translate(42.5302vw, 100vh) scale(0.7559);
}
}
.snow:nth-child(193) {
opacity: 0.9156;
transform: translate(62.2179vw, -10px) scale(0.2904);
animation: fall-193 24s -15s linear infinite;
}
@keyframes fall-193 {
76.626% {
transform: translate(71.0886vw, 76.626vh) scale(0.2904);
}
to {
transform: translate(66.65325vw, 100vh) scale(0.2904);
}
}
.snow:nth-child(194) {
opacity: 0.3712;
transform: translate(50.2986vw, -10px) scale(0.9203);
animation: fall-194 15s -30s linear infinite;
}
@keyframes fall-194 {
36.208% {
transform: translate(43.5004vw, 36.208vh) scale(0.9203);
}
to {
transform: translate(46.8995vw, 100vh) scale(0.9203);
}
}
.snow:nth-child(195) {
opacity: 0.2654;
transform: translate(97.7509vw, -10px) scale(0.1301);
animation: fall-195 25s -30s linear infinite;
}
@keyframes fall-195 {
49.889% {
transform: translate(97.8587vw, 49.889vh) scale(0.1301);
}
to {
transform: translate(97.8048vw, 100vh) scale(0.1301);
}
}
.snow:nth-child(196) {
opacity: 0.3511;
transform: translate(79.4929vw, -10px) scale(0.2666);
animation: fall-196 28s -4s linear infinite;
}
@keyframes fall-196 {
65.697% {
transform: translate(87.7481vw, 65.697vh) scale(0.2666);
}
to {
transform: translate(83.6205vw, 100vh) scale(0.2666);
}
}
.snow:nth-child(197) {
opacity: 0.7701;
transform: translate(54.5733vw, -10px) scale(0.714);
animation: fall-197 14s -26s linear infinite;
}
@keyframes fall-197 {
59.171% {
transform: translate(58.5215vw, 59.171vh) scale(0.714);
}
to {
transform: translate(56.5474vw, 100vh) scale(0.714);
}
}
.snow:nth-child(198) {
opacity: 0.3649;
transform: translate(50.2569vw, -10px) scale(0.1623);
animation: fall-198 26s -20s linear infinite;
}
@keyframes fall-198 {
69.919% {
transform: translate(47.0221vw, 69.919vh) scale(0.1623);
}
to {
transform: translate(48.6395vw, 100vh) scale(0.1623);
}
}
.snow:nth-child(199) {
opacity: 0.0707;
transform: translate(47.5378vw, -10px) scale(0.8476);
animation: fall-199 18s -29s linear infinite;
}
@keyframes fall-199 {
33.91% {
transform: translate(39.9981vw, 33.91vh) scale(0.8476);
}
to {
transform: translate(43.76795vw, 100vh) scale(0.8476);
}
}
.snow:nth-child(200) {
opacity: 0.6635;
transform: translate(35.0074vw, -10px) scale(0.8696);
animation: fall-200 12s -20s linear infinite;
}
@keyframes fall-200 {
43.358% {
transform: translate(25.6071vw, 43.358vh) scale(0.8696);
}
to {
transform: translate(30.30725vw, 100vh) scale(0.8696);
}
}
</style>
</head>
<body>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
</body>
</html>伪类和伪元素
4、伪类
HTML元素的状态是可以动态变化的。举个栗子，当你的鼠标悬浮到一个按钮上时，按钮就会变成“悬浮”状态，这时我们就可以利用伪类:hover来选中这一状态的按钮，并对其样式进行改变。
:hover是笔者最最常用的一个伪类。还有一个很常用的伪类是:nth-child，用于选中元素的某一个子元素。其他的类似:focus、:focus-within等也有一定的使用。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
@import url(https://fonts.googleapis.com/css?family=Lato);
body {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
text-align: center;
background: #222;
}
.btn {
--hue: 190;
--ease-in-duration: 0.25s;
--ease-out-duration: 0.65s;
--ease-out-delay: var(--ease-in-duration);
position: relative;
padding: 1rem 3rem;
font-size: 1rem;
line-height: 1.5;
color: white;
text-decoration: none;
background-color: hsl(var(--hue), 100%, 41%);
border: 1px solid hsl(var(--hue), 100%, 41%);
outline: transparent;
overflow: hidden;
cursor: pointer;
user-select: none;
white-space: nowrap;
transition: 0.25s;
}
.btn:hover {
background: hsl(var(--hue), 100%, 31%);
}
.btn-primary {
--hue: 171;
}
.btn-ghost {
color: hsl(var(--hue), 100%, 41%);
background-color: transparent;
border-color: hsl(var(--hue), 100%, 41%);
}
.btn-ghost:hover {
color: white;
}
.btn-border-stroke {
border-color: hsla(var(--hue), 100%, 41%, 0.35);
}
.btn-border-stroke .btn-borders {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.btn-border-stroke .btn-borders .border-top {
position: absolute;
top: 0;
width: 100%;
height: 1px;
background: hsl(var(--hue), 100%, 41%);
transform: scaleX(0);
transform-origin: left;
}
.btn-border-stroke .btn-borders .border-right {
position: absolute;
right: 0;
width: 1px;
height: 100%;
background: hsl(var(--hue), 100%, 41%);
transform: scaleY(0);
transform-origin: bottom;
}
.btn-border-stroke .btn-borders .border-bottom {
position: absolute;
bottom: 0;
width: 100%;
height: 1px;
background: hsl(var(--hue), 100%, 41%);
transform: scaleX(0);
transform-origin: left;
}
.btn-border-stroke .btn-borders .border-left {
position: absolute;
left: 0;
width: 1px;
height: 100%;
background: hsl(var(--hue), 100%, 41%);
transform: scaleY(0);
transform-origin: bottom;
}
.btn-border-stroke .btn-borders .border-left {
transition: var(--ease-out-duration) var(--ease-out-delay) cubic-bezier(0.2, 1, 0.2, 1);
}
.btn-border-stroke .btn-borders .border-bottom {
transition: var(--ease-out-duration) var(--ease-out-delay) cubic-bezier(0.2, 1, 0.2, 1);
}
.btn-border-stroke .btn-borders .border-right {
transition: var(--ease-in-duration) cubic-bezier(1, 0, 0.8, 0);
}
.btn-border-stroke .btn-borders .border-top {
transition: var(--ease-in-duration) cubic-bezier(1, 0, 0.8, 0);
}
.btn-border-stroke:hover {
color: hsl(var(--hue), 100%, 41%);
background: transparent;
}
.btn-border-stroke:hover .border-top,
.btn-border-stroke:hover .border-bottom {
transform: scaleX(1);
}
.btn-border-stroke:hover .border-left,
.btn-border-stroke:hover .border-right {
transform: scaleY(1);
}
.btn-border-stroke:hover .border-left {
transition: var(--ease-in-duration) cubic-bezier(1, 0, 0.8, 0);
}
.btn-border-stroke:hover .border-bottom {
transition: var(--ease-in-duration) cubic-bezier(1, 0, 0.8, 0);
}
.btn-border-stroke:hover .border-right {
transition: var(--ease-out-duration) var(--ease-out-delay) cubic-bezier(0.2, 1, 0.2, 1);
}
.btn-border-stroke:hover .border-top {
transition: var(--ease-out-duration) var(--ease-out-delay) cubic-bezier(0.2, 1, 0.2, 1);
}
.btn-text-float-up::after {
position: absolute;
content: attr(data-text);
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transform: translateY(35%);
transition: 0.25s ease-out;
}
.btn-text-float-up .btn-text {
display: block;
transition: 0.75s 0.1s cubic-bezier(0.2, 1, 0.2, 1);
}
.btn-text-float-up:hover .btn-text {
opacity: 0;
transform: translateY(-25%);
transition: 0.25s ease-out;
}
.btn-text-float-up:hover::after {
opacity: 1;
transform: translateY(0);
transition: 0.75s 0.1s cubic-bezier(0.2, 1, 0.2, 1);
}
</style>
</head>
<body>
<button data-text="Start" class="btn btn-primary btn-ghost btn-border-stroke btn-text-float-up">
<div class="btn-borders">
<div class="border-top"></div>
<div class="border-right"></div>
<div class="border-bottom"></div>
<div class="border-left"></div>
</div>
<span class="btn-text">Start</span>
</button>
</body>
</html>最后：
恭喜你将本文读完了。不论是过了一场视觉盛宴也好，还是学到了不少东西也好，还是直接从书签那导航到这里也好（笑），CSS的力量始终超乎你的想象。只要敢于创作，你就是这个世界的神。
必须 注册 为本站用户， 登录 后才可以发表评论！