CSS动画效果可以给网站增添生动活泼的氛围,让用户留下深刻的印象。接下来,我们就来学习如何使用CSS制作下雨的动画效果。
.raindrop { position: absolute; width: 20px; height: 20px; border-radius: 50%; background-color: #fff; opacity: 0.8; animation: fall 1.5s ease-in infinite; } @keyframes fall { 0% { transform: translateY(-100px); /* 定义雨滴的起点位置 */ } 100% { transform: translateY(100vh); /* 定义雨滴的终点位置 */ } }
首先,我们需要一个包含雨滴的容器,这里我们可以使用position属性为absolute的div。其次,我们需要定义雨滴的样式。这里我们定义了一个宽高为20px的圆形雨滴,背景颜色为#fff,不透明度为0.8。
为了让雨滴动起来,我们使用了CSS动画的关键帧来定义雨滴的起点和终点位置。关键帧动画由多个关键帧组成,每个关键帧都定义了动画在什么情况下的状态。这里我们定义了一个名为fall的关键帧,让雨滴从上到下落下来。
在关键帧的0%位置,我们将雨滴的起点位置设置为负的100px,这时候雨滴还没有出现在容器内。在100%位置,我们将雨滴的终点位置设置为100vh,这时候雨滴已经掉落到了容器底部。
最后,在雨滴的样式中添加animation属性,让雨滴开始动起来。设置1.5s的动画时间,使用ease-in函数使得动画开始的时候速度比较慢,持续时间无限。