介绍 & lt; div 类=& # 39;窗口# 39;祝辞& lt;/div>
.window {
,,,,,,,,,,,位置:,绝对;
,,,,,,,,,,,宽度:,100大众;
,,,,,,,,,,,,身高:100 vh;
,,,,,,,,,,,背景:,url (“https://cn.bing.com//th?id=OHR.ParrotsIndia_ZH-CN8386276023_UHD.jpg");
,,,,,,,,,,,background-size:,封面;
,,,,,,,,,,,背景位置:,100%;
,,,,,,,,,,,过滤器:,模糊(10 px);
} .border {
,,,,,,,,,,,位置:,绝对;
,,,,,,,,,,,margin-left:, 92 px;
,,,,,,,,,,,margin-top:, 51 px;
,,,,,,,,,,,这个特性:,100%;
,,,,,,,,,,,不必:,0,0,0,2 px rgba (0, 0, 0), 0.6);
,,,,,,,,,,,变换:,rotateY (0);
,,,,,,,,,,,宽度:,20 px;
,,,,,,,,,,,身高:,28 px;
}
& lt; div 类=& # 39;边境# 39;祝辞& lt;/div> .raindrop {
,,,,,,,,,,,过滤器:,亮度(1.2);
,,,,,,,,,,,位置:,绝对;
,,,,,,,,,,,margin-left:, 90 px;
,,,,,,,,,,,margin-top:, 50 px;
,,,,,,,,,,,background-size:, 5 vw 5 vh;
,,,,,,,,,,,这个特性:,100%;
,,,,,,,,,,,背景图片:,url (“https://cn.bing.com//th?id=OHR.ParrotsIndia_ZH-CN8386276023_UHD.jpg");
,,,,,,,,,,,变换:,旋转(180度),rotateY (0);
,,,,,,,,,,,背景位置:,48.1994160428%,54.3259834959%;
,,,,,,,,,,,宽度:,24 px;
,,,,,,,,,,,身高:,28 px;
}
& lt; div 类=& # 39;雨滴# 39;祝辞& lt;/div> <李> & lt; css-doodle 使用=皏ar(——规则)“祝辞& lt;/css-doodle> ——规则:,(,:doodle {
,,,,@grid:, 10 x10/, 100%;
,,,,溢出:,可见;
} : before {
,,,内容:,& # 39;& # 39;;
,,,位置:,绝对;
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章主要介绍CSS怎么实现雨滴动画效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
<强>玻璃窗
今天我们要实现的是雨滴效果,不过实现雨滴前,我们先把毛玻璃的效果弄出来,没有玻璃窗,雨都进屋了,还有啥好敲打的。
其实就是给一张图片,做了个模糊化的效果,看起来像毛玻璃的效果
<强>一滴雨
雨滴的效果就很巧妙了,让我们看下一滴雨完整的效果图
这滴雨其实分为两个部分,第一部分是底部的阴影部分,其实是个边框来的,代码如下:
通过宽度和高度属性和border - radius把边境拉成一个椭圆形,然后用不必把阴影拉出来,作为水滴的阴影,边框的最终效果如下:
然后是水滴的部分
水滴用背景图片设置了玻璃的图片作为倒影,倒影之所以是倒影,是因为影子是倒着的,所以用变换的旋转()旋转了图180片,正好倒过来
<李>通过背景位置设置图片在水滴的显示的位置,后面不同的水滴会显示出的倒影因为图片位置的变化都不同,显得真实
<李>雨滴的宽度比边界的宽度多几个像素,是为了让水滴的两边盖住,只留边境的上下显示阴影
<李>雨滴的margin-left和margin-top和边境的也是略有不同,是为了雨滴能居中覆盖在边界上的面,使得水滴和阴影融合的更真实
单独无阴影的水滴效果如下:
<强>随机雨滴
雨从来都不是一滴一滴来的,而且也不会很有规律的来,为了让雨滴随机出现在玻璃窗上,css-doodle框架。
先创建一个css-doodle的自定义组件
打出10 * 10个网格,这样最多可以出现100滴雨
<代码>变换:规模(@rand (。5。9));
通过变换:规模让雨滴随机变大变小
