“我正在参加 码上掘金体验活动，详情：show出你的创意代码块”
一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第11天，点击查看活动详情。
实现思路：先画出一个雨点的样式，然后画出多个雨点，为了让雨看起来更像，没有规律一些，要注意把雨点的位置和下落的速度，改成不一样的
/*雨样式*/
position: absolute;
top: 0;
left: 40%;/*雨点的位置*/
width: 1px;
height: 100px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.30));/*雨的样式*/
animation: xhxy .7s infinite;/*下雨效果*/
div布局
<div class=''>
<div class='yua'></div>
<div class='yub'></div>
<div class='yuc'></div>
<div class='yud'></div>
<div class='yue'></div>
<div class='yuf'></div>
</div>
css样式
body{
background-color: #333;
}
.yua {
position: absolute;
top: 0;
left: 40%;
width: 1px;
height: 100px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.30));
animation: xhxy .7s infinite;
}
.yub {
position: absolute;
top: 0;
left: 45%;
width: 1px;
height: 100px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.30));
animation: xhxy .2s infinite;
}
.yuc {
position: absolute;
top: 0;
left: 50%;
width: 1px;
height: 100px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.30));
animation: xhxy .3s infinite;
}
.yud {
position: absolute;
top: 0;
left: 55%;
width: 1px;
height: 100px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.30));
animation: xhxy .4s infinite;
}
.yue {
position: absolute;
top: 0;
left: 60%;
width: 1px;
height: 100px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.30));
animation: xhxy .5s infinite;
}
.yuf {
position: absolute;
top: 0;
left: 65%;
width: 1px;
height: 100px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.30));
animation: xhxy .6s infinite;
}
@keyframes xhxy {
0% {top:5%;}
100% {top:85%;}
}
