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拉成