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


Posted in HTML / CSS onOctober 08, 2019

玻璃窗

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

<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);
}

 

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

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

一滴雨

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

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

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

.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把阴影拉出来,作为水滴的阴影,边框的最终效果如下:

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

然后是水滴的部分

.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上面,使得水滴和阴影融合的更真实

单独无阴影的水滴效果如下:

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

随机雨滴

雨从来都不是一滴一滴来的,而且也不会很有规律的来,为了让雨滴随机出现在玻璃窗上,css-doodle框架。

<css-doodle use="var(--rule)"></css-doodle>

先创建一个css-doodle的自定义组件

 

--rule: ( :doodle {
     @grid: 10x10/ 100%;
     overflow: visible;
}

打出10*10个grid,这样最多可以出现100滴雨

transform: scale(@rand(.5, .9));

通过transform:scale让雨滴随机变大变小

 

:before {
    content: '';
    position: absolute;
    margin-left: @var(--mleft);
    margin-top: @var(--mtopb);
    border-radius: 100%;
    box-shadow: 0 0 0 @var(--shadow-size) rgba(0, 0, 0, 0.6);
    transform: rotateY(0);
    width: @var(--widthb);
    height: @var(--height);
}

:after {
    content: '';
    filter: brightness(1.2);
    position: absolute;
    margin-left: @var(--mleft);
    margin-top: @var(--mtopa);
    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: @r(1%, 100%) @r(1%, 100%);
    width: @var(--widtha);
    height: @var(--height);
 }

 

这里的:before和:after大家看的是不是很眼熟,其实:before里面的内容就是前面border的样式,:after里面的就是前面raindrop的样式。content必须要有,因为在伪元素(before,after)里如果没有设置“content”属性,伪元素是无用的,整个:before和:after里面的配置就都无效了。为了让雨滴显得更清晰,加了filter: brightness(1.2)让雨滴显得更亮一些。

这里面比较奇怪的是@var(),它其实就是css的变量,在css-doodle做了一层包装,作用和css的var()是一样的,我们看下这些变量的定义

 

--size:(4 + @r(1, 8));
--shadow-size: calc(((@var(--size)*0.3) - 1)*1px);
--mleft:@r(1, 100)px;
--mtop:@r(1, 100);
--mtop1:(@var(--mtop) - 1);
--mtopb:calc(@var(--mtop)*1px);
--mtopa:calc(@var(--mtop1)*1px);
--height:@r(15, 25)px;
--width:@r(8, 20);
--width1:(@var(--width) + 5);
--widthb:calc(@var(--width)*1px);
--widtha:calc(@var(--width1)*1px);

这里有几个坑要说明一下:

1号坑:css-doodle提供了@calc(),但是这里计算还是要用css的calc(),使用@calc()无效。
2号坑:在使用@var做加减法的时候,+-号的两遍要有空格,否则计算无效,切记切记。
3号不是坑:计算好数值后,怎么带上px单位呢,用calc(value*1px)这种方法就可以了,其他的单位也可以用这种方法。
4号说明:为什么要用变量?是因为before和after不在一起,为了让boder和raindrop的margin-left、margin-top、width、height等属性能够保持一致,就需要用变量在before和after外面定义好,传值到里面去。

最终的效果如下:

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

没动画效果怎么敲打我窗

雨点如果只是这样洒在窗户,那就没有敲打的意思,为了体现敲打,我决定让雨点动起来。

 

:before {
    content: '';
    position: absolute;
    margin-left: @var(--mleft);
    margin-top: @var(--mtopb);
    border-radius: 100%;
    box-shadow: 0 0 0 @var(--shadow-size) rgba(0, 0, 0, 0.6);
    transform: rotateY(0);
    width: @var(--widthb);
    height: @var(--height);
    opacity: 0;
    animation: raindrop-fall 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-fill-mode: forwards;
    animation-delay: @var(--delay);
}
:after {
    content: '';
    filter: brightness(1.2);
    position: absolute;
    margin-left: @var(--mleft);
    margin-top: @var(--mtopa);
    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: @r(1%, 100%) @r(1%, 100%);
    width: @var(--widtha);
    height: @var(--height);
    opacity: 0;
    animation: raindrop-fall 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-fill-mode: forwards;
    animation-delay: @var(--delay);
}

 

重点是:before和:after里面的最后三行,是用来实现动画效果的。

cubic-bezier()控制动画的速度,使得雨滴落到玻璃窗的效果更逼真

animation-delay 雨点出现的时间随机,同样是为了效果更逼真,逼真的效果真麻烦

再来看看raindrop-fall的@keyframe设置

 

@keyframes raindrop-fall {
    0% {
        opacity: 0;
        transform: rotate(180deg) scale(2.5, 2.3) rotateY(0);
    }
    100% {
        opacity: 1;
        transform: rotate(180deg) scale(1, 1) rotateY(0);
    }
}

总结

以上所述是小编给大家介绍的CSS实现雨滴动画效果的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
CSS3的 fit-content实现水平居中
Sep 07 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
Oct 29 HTML / CSS
CSS3实现菜单悬停效果
Nov 17 HTML / CSS
Html5上传图片 移动端、PC端通用代码
Jun 08 HTML / CSS
html5实现的便签特效(实战分享)
Nov 29 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
Jan 07 HTML / CSS
HTML5 audio标签使用js进行播放控制实例
Apr 24 HTML / CSS
教你使用Canvas处理图片的方法
Nov 28 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
Jun 12 HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
Jun 09 HTML / CSS
CSS控制继承中的height能变为可继承吗
Jun 10 HTML / CSS
HTML静态页面获取url参数和UserAgent的实现
Aug 05 HTML / CSS
CSS3 @media的基本用法总结
Sep 10 #HTML / CSS
css3 伪类选择器快速复习小结
Sep 10 #HTML / CSS
css3进阶之less实现星空动画的示例代码
Sep 10 #HTML / CSS
CSS3 animation ? steps 函数详解
Aug 30 #HTML / CSS
移动端适配 使px自动转换rem
Aug 26 #HTML / CSS
CSS3 毛玻璃效果
Aug 14 #HTML / CSS
详解css position 5种不同的值的用法
Jul 30 #HTML / CSS
You might like
php实现网页缓存的工具类分享
2015/07/14 PHP
php文件上传、下载和删除示例
2020/08/28 PHP
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
2010/03/27 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
2010/08/01 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
2010/11/11 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
.NET微信公众号开发之创建自定义菜单
2015/07/16 Javascript
JavaScript实现的经典文件树菜单效果
2015/09/08 Javascript
深入浅析JavaScript中的Function类型
2016/07/09 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
2017/03/09 Javascript
angular框架实现全选与单选chekbox的自定义
2017/07/06 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
2018/07/31 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
2018/12/25 Javascript
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
Selenium执行JavaScript脚本的方法示例
2020/12/31 Javascript
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
解析Python编程中的包结构
2015/10/25 Python
python difflib模块示例讲解
2017/09/13 Python
python实现自动发送邮件
2018/06/20 Python
Python 调用 Windows API COM 新法
2019/08/22 Python
通息工程毕业生自荐信
2013/10/16 职场文书
工程专业毕业生自荐信范文
2013/12/25 职场文书
分厂厂长岗位职责
2013/12/29 职场文书
《庐山的云雾》教学反思
2014/04/22 职场文书
政治思想表现评语
2014/05/04 职场文书
大学生入党推荐书范文
2014/05/17 职场文书
排查整治工作方案
2014/06/09 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书