效果图:
我的项目地址:https://codepen.io/jianxiujiu…
HTML 的构造如下,创立 10 个雪花元素。
其实三四个元素也能够。元素越多雪花越多,雪花的速度不一样,会显得更有层次感。
<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>
</body>
一朵雪花
首先,咱们先写一朵雪花,并设为相对定位。
.snow {
position: absolute;
color: #fff;
&:after{content: "❄";}
}
这样咱们就失去一朵雪花了。那么怎么生成很多的雪花呢?咱们能够用 text-shadow
这个属性,给雪花设置一个暗影。
.snow {
position: absolute;
color: #fff;
&:after {
text-shadow: 10px 10px #fff;
content: "❄";
}
}
那么给一朵雪花生成 3 个暗影,就写 3 个 shadow 值就能够了。
text-shadow: 10px 10px #fff, 5px 25px #fff, 22px 5px #fff;
多重雪花
当咱们心愿雪花能有更更更多的暗影,然而手动写太累人了也不迷信,所以咱们须要用到 SASS 的 for 循环
,并联合random()
随机函数去帮咱们随机生成多重暗影。
暗影的色彩能够设置为不同的透明度,能够让雪花看起来有层次感。
@function boxShadow ($n) {$value: #{random(2000)}px #{random(2000)}px rgba(255,255,255,random(10)/10);
@for $i from 1 through $n{$value: #{$value} , #{random(2000)}px #{random(2000)}px rgba(255,255,255,random(10)/10);
}
@return $value;
}
.snow {
position: absolute;
color: #fff;
&:after{text-shadow: boxShadow(150);
content: "❄";
}
}
此时咱们一朵雪花的多重暗影就实现了。然而一朵雪花的动画就只动一遍就隐没了,并不是咱们想要的成果。所以咱们须要多增加几朵雪花,让它们不同工夫不同地位落下。
雪花飘落
@for $i from 1 through 10 {.snow:nth-child(#{$i}) {left: #{random(30)}vw;
font-size: #{(random(15) + 12)}px; // 雪花大小随机
color: rgba(255, 255, 255, random()); // 雪花透明度随机
animation: falldown #{random(5) + 85}s #{$i * -3}s infinite both; // 雪花降落的工夫随机,区间为 86-90s
&:after {
content: "❄";
text-shadow: boxShadow(random(150));
}
}
}
@keyframes falldown {
0% {transform: translate3d(0, -2000px, 0);
}
100%{transform: translate3d(0, 2000px, 0);
}
}