css实现炫酷充电动画
先绘制一个电池,电池头部和电池的身体
这里其实就是两个div
,使用z-index
改变层级,电池的身体盖住头部,圆角使用border-radius
完成
html部分,完整的css部分在最后
<div class="chargerBox"><div class="chargerHead"></div><div class="chargerBody"><div class="water"><div class="whiteBox"></div></div></div><div class="shade"></div>
</div>
绘制电池的css
部分
.chargerBox{width: 200px;height: 200px;background: #eee;margin: 30px;padding: 50px;.chargerHead{width: 20px;height: 20px;background: #e9e9e9;border-radius: 4px;margin: 0 auto;box-shadow: 0px 0px 6px -2px #6d6d6d;animation: light 1s forwards linear 25s;}.chargerBody{width: 120px;height: 180px;margin: 0 auto;margin-top: -12px;border-radius: 15px 15px 10px 10px;z-index: 10;background-color: #fff;box-shadow: 0px 0px 6px -2px #6d6d6d;}
}
绘制完身体后开始给电池充电,让电池身体内部动起来。
给电池内部添加一个div
,div
的初始高度为0
,随着动画的播放,慢慢的充满电池
这里充电的颜色可以改成渐变,随着电量的饱和,渐变的颜色也会随之更改,linear-gradient
渐变是不能直接更改颜色的,这里可以使用 filter: hue-rotate();
来修改图像的色相值,从而达到渐变动画的效果。
下面是充电部分的代码:
.water{width: 120px;height: 10px;position: absolute;bottom: 0;background: linear-gradient(0deg,#7F7FD5,#86A8E7,#91eae4);filter: hue-rotate(0deg); /**关于渐变,普通的颜色更改是无效的,只能通过filter:hue-rotate色相旋转来实现颜色变化,初始不变 */animation: riseWater 20s forwards linear;left: 50%;transform: translateX(-50%);
}
@keyframes riseWater {from {height: 10px;}to {height: 100%;filter: hue-rotate(60deg); /* 颜色变化 */}
}
现在电池的电量已经充起来了,写到这里,充电的部分已经ok了,剩下的就是让电量动起来,像水一样流动
先绘制一个圆角矩形
border-radius: 45%
这个圆角矩形就是充电动画的关键,静止的时候其实看不出来它与水流有什么关联,咱们让它动起来观察一下
这一块就是水流动画的显示部分,白色的是水流,灰色的不展示,上一步中已经写好了充电的动画,这里只需要将该位置叠加到充电动画上面,即可完成充电的水流效果。
水流一般是多层的,所以这里可以再添加一个旋转的矩形,两个矩形旋转的角度和时长不同,并且更改其中一个矩形的rgba
即可实现真实的水流效果。
.whiteBox{width: 300px;height: 300px;position: absolute;left: 50%;bottom: -10px;transform: translateX(-50%);animation: whiteBoxTop 25s forwards linear;&::before{content: '';width: 100%;height: 100%;position: absolute;background: #fff;border-radius: 45% ;animation: whiteSpin 5s infinite linear;}&::after{content: '';width: 101%;height: 101%;position: absolute;border-radius: 45% ;background: rgba(255,255,255,0.3);animation: whiteSpin2 7s infinite linear;}
}
@keyframes whiteBoxTop {from {bottom: 0;}to {bottom: 190px;}
}@keyframes whiteSpin {from {transform:rotate(0deg);}to {transform:rotate(360deg);}
}@keyframes whiteSpin2 {from {transform:rotate(0deg);}to {transform:rotate(360deg);}
}
注意:矩形的旋转必须是
360
度的,否则会出现卡顿的情况,因为无限循环的动画第一次循环结束后会回到最初的起点,如果不是360
度可能会发生旋转到某度(例如:200度)的时候度数重置到0,重新循环就会出现不流畅的画面。
做完水流动画后,给电池的头部加一个动画,延迟时间为充电设置的时间,当电池充满时,头部亮起表示电池已经充满。
我这里设置的充满时长为20s
,这里需要延迟25s
,因为水流的中间有凹陷的地方,所以延迟时间需要大于充满时长才行。
.chargerHead{width: 20px;height: 20px;background: #e9e9e9;border-radius: 4px;margin: 0 auto;z-index: 10;box-shadow: 0px 0px 6px -2px #6d6d6d;animation: light 1s forwards linear 25s; /*延迟25s*/}@keyframes light {from {background: #ffe793;}to {background: #ffe793;filter: contrast(200%); /*让头部亮起来 增加200%的饱和度*/}}
完成这些后,需要给电池增加渐变阴影,让电池有厚度感和真实感,这里创建一个div
,大小和电池一致,通过给电池添加z-index
使电池覆盖div
,使用filter: blur(20px)
来让底部的div
高斯模糊从而实现阴影的效果,阴影和电池的颜色保持一致(动态渐变),并且div
的动画时长和高度也和电池保持一致。
/* 渐变阴影 */
.shade{width: 120px;height: 0px;margin: 0 auto;margin-top: 0px;border-radius: 15px 15px 15px 15px;background: linear-gradient(0deg,#7F7FD5,#86A8E7,#91eae4);filter: blur(10px);animation: shadeBase 25s forwards linear;
}
@keyframes shadeBase {from { height: 0px; margin-top: 0px;filter: blur(20px) hue-rotate(0deg); /* 颜色变化 */ }to { height: 180px; margin-top: -180px; /*高度和电池一致*/filter: blur(20px) hue-rotate(60deg); /* 颜色变化 */ }}
}
除了这种方案外,还可以使用box-shadow
实现阴影,box-shadow
使用rgba
,在动画渲染的同时修改rgba
来实现阴影颜色的变化。
@keyframes shadeBase {from { height: 0px; margin-top: 0px;box-shadow: 0px 0px 15px 10px rgba(143, 148, 227,0.2);}to { height: 180px; margin-top: -180px;box-shadow: 0px 5px 20px 5px rgba(203, 163, 238,0.8); }}
下面是css部分的代码
.chargerBox{width: 200px;height: 200px;margin: 30px;padding: 50px;.chargerHead{width: 20px;height: 20px;background: #e9e9e9;border-radius: 4px;margin: 0 auto;z-index: 10;box-shadow: 0px 0px 6px -2px #6d6d6d;animation: light 1s forwards linear 25s;}@keyframes light {from {background: #ffe793;}to {background: #ffe793;filter: contrast(200%);}}.chargerBody{width: 120px;height: 180px;margin: 0 auto;margin-top: -12px;border-radius: 15px 15px 10px 10px;z-index: 10;box-shadow: 0px 0px 6px -2px #6d6d6d;position: relative;overflow: hidden;.water{width: 120px;height: 10px;position: absolute;bottom: 0;background: linear-gradient(0deg,#7F7FD5,#86A8E7,#91eae4);filter: hue-rotate(0deg); /**关于渐变,普通的颜色更改是无效的,只能通过filter:hue-rotate色相旋转来实现颜色变化,初始不变 */animation: riseWater 20s forwards linear;left: 50%;transform: translateX(-50%);}@keyframes riseWater {from {height: 10px;}to {height: 100%;filter: hue-rotate(60deg); /* 颜色变化 */}}.whiteBox{width: 300px;height: 300px;position: absolute;left: 50%;bottom: -10px;transform: translateX(-50%);animation: whiteBoxTop 25s forwards linear;&::before{content: '';width: 100%;height: 100%;position: absolute;background: #fff;border-radius: 45% ;animation: whiteSpin 5s infinite linear;}&::after{content: '';width: 101%;height: 101%;position: absolute;border-radius: 45% ;background: rgba(255,255,255,0.3);animation: whiteSpin2 7s infinite linear;}}@keyframes whiteBoxTop {from {bottom: 0;}to {bottom: 190px;}}@keyframes whiteSpin {from {transform:rotate(0deg);}to {transform:rotate(360deg);}}@keyframes whiteSpin2 {from {transform:rotate(0deg);}to {transform:rotate(360deg);}}}/* 渐变阴影 */.shade{width: 120px;height: 0px;margin: 0 auto;margin-top: 0px;border-radius: 15px 15px 15px 15px;background: linear-gradient(0deg,#7F7FD5,#86A8E7,#91eae4);filter: blur(10px);animation: shadeBase 25s forwards linear;}@keyframes shadeBase {from { height: 0px; margin-top: 0px;filter: blur(20px) hue-rotate(0deg); /* 颜色变化 */ }to { height: 180px; margin-top: -180px;filter: blur(20px) hue-rotate(60deg); /* 颜色变化 */ }}
}
该动画的灵感来自:https://github.com/chokcoco/iCSS/issues/75
案例源码:https://gitee.com/wang_fan_w/css-diary
如果觉得这篇文章对你有帮助,欢迎点赞、收藏、转发哦~
css实现炫酷充电动画相关推荐
- 【每日一练】138—CSS实现炫酷背景动画效果
以下是今天练习的最终效果: HTML代码: <!DOCTYPE html> <html lang="en"> <head><meta na ...
- AndroidQ(10.0) 手机锁屏炫酷充电动画————html方案
效果图 知识储备 1.WebView加载html,并通过JS传值 在网上随便搜索找到了这个炫酷的充电动画,可惜是css实现的,想在Android中使用那只能 通过 WebView 来加载了,要传递当前 ...
- AndroidQ(10.0) 手机锁屏炫酷充电动画————lottie方案
效果图 知识储备 1.Lottie动画使用指南 Lottie开源动画库介绍与使用示例 Android Lottie动画初探 Lottie动画免费下载网站 2.SystemUI 中引入AAR库编译 因为 ...
- 如何做一个炫酷的动画网站-css实现图片上下浮动效果
目前网站制作技术已经非常成熟.所以要实现一个炫酷的动画网站还是非常容易,现在通过js和css就都能实现.直接css就能实现各种效果,下面我们来通过一个小动画看看如何用css来实现让你的网站图片上下浮动 ...
- 纯html+css炫酷地球仪动画效果
纯html+css炫酷地球仪动画效果 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
- CSS实现霓虹灯按钮,CSS实现炫酷的霓虹灯按钮动画
作者:AlbertYang,软件设计师,Java工程师,前端工程师,爱阅读,爱思考,爱编程,爱自由,信奉终生学习,每天学习一点点,就是领先的开始. 微信公众号:AlbertYang 今天教大家使用CS ...
- html中flash的简单动画效果,css实现快速炫酷抖动动画效果
1.Animate.css简介 Animate.css是一个可在您的Web项目中使用的即用型跨浏览器动画库.非常适合强调,首页,滑块和引导注意的提示.它是一个来自国外的 CSS3 动画库,它预设了抖动 ...
- HTML+CSS实现炫酷的登录界面
你好,我是罡罡同学! 代码谱第一页忘掉心上人,最后一页...... 谢谢大家的支持,您的一键三连是 罡罡同学前进的最大动力! 打赏一点钱,帮我买包辣条,继续创作,谢大家! 一键三连 一键三连 一键三连 ...
- 如何利用 Android 自定义控件实现炫酷的动画?|CSDN 博文精选
作者 | u012551350 本文精选自 CSDN 博客,已获作者授权 「知足常乐」,很多人不满足现状,各种折腾,往往舍本逐末,常乐才能少一分浮躁,多一分宁静.近期在笔者身上发生了许多事情,心态也发 ...
最新文章
- python保存至对应目录_python如何实现复制目录到指定目录
- ant-design圣诞彩蛋
- 高并发编程-线程生产者消费者的综合示例
- jdbc preparestatement 执行多条语句_jmeter获取JDBC响应做接口关联(三)
- Android 开发 存储目录的详解
- Python实现给指定的微信朋友发信息
- 下载文件个别浏览器文件名乱码解决办法
- VS C++ vector结构体 增加元素 删除元素 获取第一个元素 最后一个元素 清空元素
- mysql高性能学习笔记03_《高性能MySQL》学习笔记——第三章 服务器性能剖析
- linux 五笔输入法下载软件,极点五笔Linux版|极点五笔输入法官方linux版_最火软件站...
- GNS3(1.下载与安装)
- 常用视频播放器插件汇总
- 苹果id可以同时用两个手机吗_苹果手机Apple ID账号的重要性你知道多少?
- Scala 键盘输入
- 论文笔记+模型实现TransNets: Learning to Transform for Recommendation
- FF-A架构中CA到TA的调用模型
- httpclient Post请求 参数用des加密
- 路由配置与管理——静态路由配置与管理
- 关于装有WIN7系统的硬盘转移到USB3.0移动硬盘盒后开机启动蓝屏(代码7B)的解决方案
- 在线转换,直接将dwg转换成jpg