web前端入门到实战：CSS实现雨滴动画效果

最新推荐文章于 2024-09-24 12:34:57 发布

原创

最新推荐文章于 2024-09-24 12:34:57 发布 · 1.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #web前端 #前端开发 #前端教程

本文介绍了如何使用CSS实现逼真的雨滴动画效果，包括创建毛玻璃般的玻璃窗背景、设计雨滴形状、随机分布雨滴以及添加动画，使雨滴仿佛在敲打窗户。

玻璃窗

今天我们要实现的是雨滴效果，不过实现雨滴前，我们先把毛玻璃的效果弄出来，没有玻璃窗，雨都进屋了，还有啥好敲打的。

<div class='window'></div>

.window {
            position: absolute;
            width: 100vw;
            height: 100vh;
            background: url("https://cn.bing.com//th?id=OHR.ParrotsIndia_ZH-CN8386276023_UHD.jpg");
            background-size: cover;
            background-position: 100%;
            filter: blur(10px);
}

其实就是给一张图片，做了个模糊化的效果，看起来像毛玻璃的效果

一滴雨

雨滴的效果就很巧妙了，让我们看下一滴雨完整的效果图

这滴雨其实分为两个部分，第一部分是底部的阴影部分，其实是个边框来的，代码如下：

.border {
            position: absolute;
            margin-left: 92px;
            margin-top: 51px;
            border-radius: 100%;
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
            transform: rotateY(0);
            width: 20px;
            height: 28px;
}

web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

<div class='border'></div>

通过width和height属性和border-radius把border拉成一个椭圆形，然后用box-shadow把阴影拉出来，作为水滴的阴影，边框的最终效果如下：

最低0.47元/天解锁文章