玻璃窗
今天我们要实现的是雨滴效果，不过实现雨滴前，我们先把毛玻璃的效果弄出来，没有玻璃窗，雨都进屋了，还有啥好敲打的。
<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;
}<div class='border'></div>
通过width和height属性和border-radius把border拉成一个椭圆形，然后用box-shadow把阴影拉出来，作为水滴的阴影，边框的最终效果如下：
然后是水滴的部分
.raindrop {
filter: brightness(1.2);
position: absolute;
margin-left: 90px;
margin-top: 50px;
background-size: 5vw 5vh;
border-radius: 100%;
background-image: url("https://cn.bing.com//th?id=OHR.ParrotsIndia_ZH-CN8386276023_UHD.jpg");
transform: rotate(180deg) rotateY(0);
background-position: 48.1994160428% 54.3259834959%;
width: 24px;
height: 28px;
}
<div class='raindrop'></div>
水滴用background-image设置了玻璃的图片作为倒影，倒影之所以是倒影，是因为影子是倒着的，所以用transform的rotate()旋转了图片180，正好倒过来
通过background-position设置图片在水滴的显示的位置，后面不同的水滴会显示出的倒影因为图片位置的变化都不同，显得真实
raindrop的width比border的width多几个像素，是为了让水滴的两边盖住border，只留border的上下显示阴影
raindrop的margin-left和margin-top和border的也是略有不同，是为了raindrop能居中覆盖在border上面，使得水滴和阴影融合的更真实
