css 模拟手机充电水滴效果

看个效果图，没办法搞gif

魔法师开始表演

万能的div出场

    <div class="container"><div class="drop"></div><div class="drop"></div><div class="drop"></div><div class="collection"></div><span></span></div>

css全局样式
flex垂直布局，使水滴和容器垂直显示。

      body {margin: 0;}.container {display: flex;justify-content: center;align-items: center;min-height: 100vh;background-color: #000;flex-direction: column;filter: contrast(30);}

水滴样式

      .drop {width: 100px;height: 100px;background-color: #fff;border-radius: 50%;position: absolute;filter: blur(20px);opacity: 0;animation: 2.5s drop linear infinite;}

水滴动画，下落过程逐渐缩小，且沿Y轴下滑

      @keyframes drop {0% {transform: scale(0.7) translateY(-600%);opacity: 0;}50% {transform: scale(0.4) translateY(-80%);opacity: 1;}100% {transform: scale(0.3) translateY(0px);}}

设置第二第三水滴动画的延迟效果

      .drop:nth-child(2) {animation-delay: 0.5s;}.drop:nth-child(3) {animation-delay: 0.7s;}

水滴容器css样式

      .collection {width: 100px;height: 100px;background-color: #fff;border-radius: 50%;filter: blur(20px);animation: 2.5s collection linear infinite;}

水滴容器体积变化动画

      @keyframes collection {0% {transform: scale(1) rotate(0deg);}50% {transform: scale(1.3) rotate(180deg);width: 90px;border-top-left-radius: 40%;border-bottom-left-radius: 45%;}100% {transform: scale(1) rotate(360deg);}}

接着是电量百分比的变化，使用 before

      span {position: relative;display: block;top: -65px;}span::before {content: '80%';font-size: 25px;color: aqua;animation: 2.5s up linear infinite;}

电量上升动画

      @keyframes up {0% {content: '80.1%';}50% {content: '80.2%';}100% {content: '80.3%';}}

完整html，有兴趣的可以试试

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>body {margin: 0;}.container {display: flex;justify-content: center;align-items: center;min-height: 100vh;background-color: #000;flex-direction: column;filter: contrast(30);}.drop {width: 100px;height: 100px;background-color: #fff;border-radius: 50%;position: absolute;filter: blur(20px);opacity: 0;animation: 2.5s drop linear infinite;}.drop:nth-child(2) {animation-delay: 0.5s;}.drop:nth-child(3) {animation-delay: 0.7s;}.collection {width: 100px;height: 100px;background-color: #fff;border-radius: 50%;filter: blur(20px);animation: 2.5s collection linear infinite;}span {position: relative;display: block;top: -65px;}span::before {content: '80%';font-size: 25px;color: aqua;animation: 2.5s up linear infinite;}@keyframes up {0% {content: '80.1%';}50% {content: '80.2%';}100% {content: '80.3%';}}@keyframes drop {0% {transform: scale(0.7) translateY(-600%);opacity: 0;}50% {transform: scale(0.4) translateY(-80%);opacity: 1;}100% {transform: scale(0.3) translateY(0px);}}@keyframes collection {0% {transform: scale(1) rotate(0deg);}50% {transform: scale(1.3) rotate(180deg);width: 90px;border-top-left-radius: 40%;border-bottom-left-radius: 45%;}100% {transform: scale(1) rotate(360deg);}}</style></head><body><div class="container"><div class="drop"></div><div class="drop"></div><div class="drop"></div><div class="collection"></div><span></span></div></body>
</html>

参考自–掘金文章

css 模拟手机充电水滴效果相关推荐

HTML、CSS——制作手机充电特效
HTML.CSS--制作手机充电特效尽管前端学习的第一阶段已经结束,接下了要全速开启js,vue,react阶段,练习CSS的次数必然会减少,现在还是能多练一点就多练一点今天带来是是用CSS制作手 ...
贝塞尔曲线（Bezier）之水波纹的手机充电动画效果（二）
博主声明: 转载请在开头附加本文链接及作者信息,并标记为转载.本文由博主威威喵原创,请多支持与指教. 本文首发于此博主:威威喵 | 博客主页:https://blog.csdn.net/ ...
贝塞尔曲线（Bezier）之水波纹的手机充电动画效果（一）
博主声明: 转载请在开头附加本文链接及作者信息,并标记为转载.本文由博主威威喵原创,请多支持与指教. 本文首发于此博主:威威喵 | 博客主页:https://blog.csdn.net/ ...
超级炫酷的手机充电特效
超级炫酷的手机充电特效效果如下: html HTML代码如下: <div class="box"><div class="number"&g ...
安卓手机充电慢_苹果和安卓手机充电新玩法：充电零钱自动涨效果
手机充电零钱自动涨效果首先,这个玩法苹果和安卓手机通用,只要在手机上安装有微信就可以实现手机充电零钱自动涨效果,操作方法非常简单,只需打开特定的小程序,然后将你的手机充上电,你的零钱就会自动上涨,一 ...
[css] 如何使用CSS3的属性设置模拟边框跟border效果一样？
[css] 如何使用CSS3的属性设置模拟边框跟border效果一样? <!DOCTYPE html> <html lang="en"> <head& ...
CSS模拟实现色阶效果
CSS模拟实现色阶效果,对各种版本的浏览器兼容性考虑的挺周全,在兼容性方面出色,这个只是模拟色阶的效果,显示出不同的色块的深浅颜色,并标识出来英文的颜色名称,其实技术方面不太难,只是有些麻烦,非常感谢 ...
html图片靠右浮动文字左侧环绕,CSS 模拟float实现center文字左右环绕图片的效果...
什么是文字左右环绕图片?就是下图的效果: 效果的CSS代码可以点击这里查看在CSS中,并没有float: center这种设置,但是我们可以通过一些小技巧来模拟出类似的效果. 经常会有小伙伴问:有 ...
用纯css模拟下雪的效果
下雪效果只是一类效果的名称,可以是红包雨等一些自由落体的运动效果,本文就是用纯css模拟下雪的效果,更多效果大家可以自行发挥. 1.前言由于公司产品的活动,需要模拟类似下雪的效果.浏览器实现动画无非 ...
纯css模拟下雪效果
效果如其名,想必都见过下雪(可能南方人除外哈哈),但下雪效果只是一类效果的名称,可以是红包雨等一些自由落体的运动效果,本文就是用纯css模拟下雪的效果. 1.前言由于公司产品的活动,需要模拟类似下雪 ...

css 模拟手机充电水滴效果

css 模拟手机充电水滴效果相关推荐

最新文章

热门文章