html实现的动画效果代码,CSS实现雨滴动画效果的实例代码

玻璃窗

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

.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;

}

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

然后是水