使用CSS实现一个雨滴滑落效果
我要评论前言
下雨天坐在车窗前，看着雨滴顺着车窗渐渐落下，这一唯美的场景，忍不住想记录下来。最近在纠结电脑壁纸时，无意间看到有类似的场景，可以将自己喜欢的壁纸加上这种效果。作为多年切图仔，不由地想到了用css动画应该可以实现这一效果，于是，直接开干。先上效果图：
实现思路
定义多个小水滴
首先直接使用absolute定位，只需要亿点点时间就能创造出多个分布于不同位置以及不同大小的水滴。大致代码如下：
.border {
position: absolute;
margin-left: 2px;
margin-top: 1px;
border-radius: 100%;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
.border:nth-child(1) {
left: 10.04698vw;
top: 91.82078vh;
width: 2px;
height: 7.15325px;
}
.border:nth-child(2) {
left: 12.82745vw;
top: 77.30419vh;
width: 10px;
height: 12.27636px;
}
....最终实现了如下效果：
让水珠动起来
此时就需要用到css的animation动画效果了，又花费了亿点点时间给每个水珠加上下落的动画效果。
.raindrop:nth-child(1) {
left: 10.04698vw;
top: 91.82078vh;
width: 6px;
height: 7.15325px;
background-position: 10.04698% 91.82078%;
-webkit-animation: 3.10099s falling 0.3s ease-in infinite;
animation: 3.10099s falling 0.3s ease-in infinite; //动画时间每个水珠不一样
}
@keyframes falling {
to {
-webkit-transform: translateY(500px);
transform: translateY(500px);
}
}注意，由于每个小水珠距离底部的位置不同，所以下落的动画时间也要随着高度的不同动态调整
增加背景模糊
为了模拟玻璃上的效果，我们加上背景图，并配置一定的模糊效果，此时用到filter: blur(20px);实现高斯模糊效果。
.window {
position: absolute;
width: 100vw;
height: 100vh;
background: url("1.jpg");
background-size: cover;
background-position: 50%;
-webkit-filter: blur(10px);
filter: blur(10px);
}一顿操作下来，实现的效果如下：
有没有发下少了点什么，这个水珠效果也太假了，那么接下来，我们就去把这个圈做的更像水珠。
制作水珠效果
想象一下，透过水珠看外面会是什么样的吗，背景是不是都会映射在水珠上，并且随着水珠的移动，会发生不同的折射效果。那么，我们只用在每个水珠上加上对应背景的高清照，而且给背景加上旋转的动画效果，并给它一点点高光，能呈现出立体的感觉出来。直接上代码：
.raindrop {
position: absolute;
border-radius: 100%;
background-image: url("1.jpg");
background-size: 5vw 5vh;
background-position: 50%;
-webkit-transform: rotate(180deg) rotateY(0);
transform: rotate(180deg) rotateY(0);
}
.raindrop:nth-child(1) {
left: 10.04698vw;
top: 91.82078vh;
width: 6px;
height: 7.15325px;
background-position: 10.04698% 91.82078%;
-webkit-animation: 3.10099s falling 0.3s ease-in infinite;
animation: 3.10099s falling 0.3s ease-in infinite;
}
....和之前写水珠一样，需要造一个同样的更灵动的水珠伴随着原来的一起下落，改变每个水珠的background-position 来实现不同的折射效果，filter: brightness(1.2);实现水珠的高光效果。
总结
通过以上一顿操作，最终实现了开头的效果，其实本文用到的技术和动画效果并不多，更多的是不停地造小水珠😭。我如愿地将自己喜欢的壁纸加上了这个动画效果，当然刚看到这个效果我也没有想到通过css也能如此轻松的实现，更多炫酷的css效果我再去研究研究，分享给各位看官，前端的尽头是css啊🤔 。
源码地址：https://gitee.com/fcli/rain.git
以上就是CSS实现一个雨滴滑落效果的详细内容，更多关于CSS实现雨滴滑落的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了纯CSS流星雨背景的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习2019-08-01
本文分享一下如何仅用CSS3，实现单标签的动态晴阴雨雪。使用的技术是单标签，纯css，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2019-07-12
这篇文章主要介绍了CSS 、JS实现浪漫流星雨动画的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-09
这篇文章主要为大家详细介绍了如何CSS实现简单的风吹动树叶的动画效果，文中的示例代码讲解详细，具有一定的借鉴价值，感兴趣的小伙伴可以跟随小编一起学习一下2024-01-05
这篇文章主要介绍了CSS 实现轮播图效果(自动切换、无缝衔接、小圆点切换),，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋2023-12-27
这篇文章主要介绍了纯css实现自动+手动图片轮播效果,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-12-27
在现代前端开发中，为网站添加吸引人的动画效果是提高用户体验的一种常见方式,其中，呼吸灯效果是一种简单而又引人注目的动画，下面就跟随小编一起深入学习一下如何利用CSS2023-12-25
为了良好的用户体验，需要在容器顶部可滚动的情况下增加一个阴影条，提示用户可向上滚动，本文主要为大家详细介绍了如何使用CSS实现简单的滚动阴影效果，有需要的小伙伴可2023-12-12
这篇文章主要为大家详细介绍了如何通过纯CSS实现炫酷的背景霓虹灯文字效果，文中的示例代码讲解详细，具有一定的借鉴价值，感兴趣的小伙伴可以跟随小编一起学习一下2023-12-05- 设置text-overflow: ellipsis;即可实现文本溢出省略的效果，本文主要介绍了CSS 文字溢出:ellipsis在IE上不起效果的解决，具有一定的参考价值，感兴趣的可以了解一下2023-11-23
最新评论