前言

CSS3的滤镜真的是一个非常强大的功能，如果我们能够很好的利用它，并充分发挥我们的想象力，想要制作出非常惊艳的动效也是没有问题的哦。比如：接下来我要跟大家分享的一个巧妙使用CSS滤镜绘制出来的android手机电池充电动效，还是老规矩，小凡我依然分享的是uni-app|view组件版哦。(*￣︶￣) 本文的设计思路参考与【掘金大佬chokcocol的文章】

一、效果展示及思路分析

1.效果展示

2.思路分析

我们可以将该动效拆成三部分来理解：

第一部分最上面的圆环以及中间的充电电量百分比，第二部分中间大小不一的不断上升的气泡，第三部分最下面的一大块产生气泡的气泡池

二、实现步骤

1.准备工作

在正式开始写代码之前，需要先下载相应的IDE，以及进行必要的配置工作。

小凡在【uni-app项目|vue组件形式实现的科技感loading纯CSS动效】文章中详细讲解过如何进行必要的配置工作，这里就不再重复讲解了，大家可以点击右侧链接查看→科技感Loading动效详解

2.代码实现

（1）在home.vue应用启动页中添加一个布局，引入并注册自定义vue组件，在模版中使用自定义vue组件

<template><view class="container"><view><battery></battery></view></view>
</template><script>import Battery from '@/components/Battery.vue'export default {components:{Battery}}
</script><style>/*引入的样式*/.container{position: relative;display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #000;}
</style>

（4）编写自定义vue组件Battery.vue

说明：样式代码并没有考虑浏览器兼容问题，本代码的测试环境是谷歌浏览器。

在模版代码块中，添加相应的view元素

<template><!-- 充电效果最外层容器 --><view class="battery"><!-- 旋转的圆环和中间显示的充电量百分比 --><text class="number">98.68%</text><view class="circle"></view><!-- 底层的气泡池 --><view class="bubble-pool"></view><!-- 产生的气泡 --><view class="bubble"></view><view class="bubble"></view><view class="bubble"></view><view class="bubble"></view><view class="bubble"></view><view class="bubble"></view><view class="bubble"></view><view class="bubble"></view><view class="bubble"></view><view class="bubble"></view><view class="bubble"></view><view class="bubble"></view><view class="bubble"></view><view class="bubble"></view><view class="bubble"></view><view class="bubble"></view></view>
</template>

设置class属性为battery的view元素的样式（充电效果最外层容器），并添加变色动效（容器中所有包含的元素都会添加当前的变色动效）

    /*电池充电效果容器样式及变色动效*/.battery{position: relative;width: 300px;height: 400px;background-color: #000;/*设置元素图像的对比度*/filter: contrast(15);/*添加变色动效*/animation: hueRotate 5s linear infinite;}/*通过改变元素的色相旋转值，实现颜色的不断变化*/@keyframes hueRotate{0%{filter: contrast(15) hue-rotate(0);}100%{filter: contrast(15) hue-rotate(360deg);}}

绘制旋转的圆环以及充电量百分比文字

    /*设置充电量百分比样式*/.number{position: absolute;top: 12%;left: 50%;margin-left: -100px;width: 200px;height: 200px;font-size: 32px;font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;line-height: 200px;text-align: center;color: #fff;z-index: 1;}/*设置圆环容器样式*/.circle{position: absolute;left: 50%;top: 0;margin-left: -150px;width: 300px;height: 300px;/*设置元素高斯模糊效果*/filter: blur(7px);/*设置旋转动效*/animation: circleRotate 5s linear infinite;}/*绘制圆环，设置两个伪元素的公共样式*/.circle::before,.circle::after{content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}/*通过设置两个伪元素不同的大小、背景色以及边框圆角值，再结合元素的高斯模糊和对比度*//*从而绘制出我们想要的圆环图形*/.circle::before{width: 200px;height: 200px;background-color: #4CD964;border-radius: 42% 38% 62% 49%/45%;}.circle::after{width: 176px;height: 178px;background-color: #000;border-radius: 50%;}/*设置圆环的旋转动效*/@keyframes circleRotate{0%{transform: rotate(0);}100%{transform: rotate(360deg);}}

重点：绘制气泡池以及不断上升的气泡动效（这里用到了一点点sass方面的知识）

    /*气泡池*/.bubble-pool{position: absolute;bottom: 0;left: 50%;transform: translate(-50%, 0%);width: 120px;height: 40px;background-color: #4CD964;border-radius: 150px 150px 0 0;/*设置元素高斯模糊效果，当气泡从这里生成时会产生融合分离的奇妙特效*/filter: blur(5px);}/*气泡*/.bubble{position: absolute;background-color: #4CD964;border-radius: 50%;transform: translate(-50%, -50%);/*设置元素高斯模糊效果，会产生融合分析的奇妙特效*/filter: blur(5px);/*设置气泡不断上升的动效*/animation: bubbleMoveUp 5s ease-in-out infinite;}/*通过sass的for循环产生随机大小的气泡和动效*/@for $i from 0 through 15 { .bubble:nth-child(#{$i}) {$width: 15 + random(15) + px;left: 40% + random()*20;width: $width;height: $width;animation: bubbleMoveUp #{random(6) + 3}s ease-in-out -#{random(5000)/1000}s infinite;}}@keyframes bubbleMoveUp{0%{bottom: 0;}100%{/*调整气泡结束的位置，将结束位置设置在刚刚到达圆环处*/bottom: calc(100% - 260px);}}

>>点击下载源码

如果喜欢小凡的这篇文章，记得点赞、收藏和分享哦！也欢迎大家在评论区留言。

干货分享|巧用CSS滤镜绘制安卓手机充电动效(uni-app|view组件版)相关推荐

干货分享|纯CSS绘制电池充电水波纹动效(uni-app|view组件版)
前言依托于CSS3提供的强大功能,我们可以充分发挥自己的想象力,制作出许多非常惊艳的动效,比如:接下来我要跟大家分享的一个完全用CSS绘制出来的电池充电水波纹动效,还是老规矩,小凡我依然分享的是un ...
android手机必备app,5款安卓手机必备的黑科技APP！各个都是精品，一定要低调收藏使用...
原标题:5款安卓手机必备的黑科技APP!各个都是精品,一定要低调收藏使用 1.轻记账是一款便捷好用的记账小工具应用,对于花钱如流水的你来说还是很好用的,尤其是对自己每个月不知道花到哪里的钱可以很好的 ...
Android怎么自定义充电铃声,安卓手机充电提示音怎么改 Android设置换充电提示音教程...
自苹果ios14充电提示音火了之后,很多安卓手机也增加了这个功能,比如vivo和OPPO,而其它厂牌的手机需要下载软件才能更改充电提示音,还是比较麻烦的,安卓手机充电提示音怎么设置?下面带来全面介绍. ...
安卓手机充电慢_安卓手机充电提示音怎么改 Android设置换充电提示音教程
阅读本文前,请您先点击上面的蓝色字体,再点击"关注",这样您就可以继续免费收到文章了.每天都有分享,完全是免费订阅,请放心关注. 安卓手机充电提示音怎么设置 1.点击打开手机的设置 ...
安卓手机充电慢_安卓手机充电提示音来啦！
安卓手机 · 充电提示音软件的名字有点长咳咳这不是重点教程开始最近苹果的充电提示音老火了,然后我们安卓的也要安排上进入软件后你就会看到下面的首页展示图还不错,能检测手机温度并发送通知,低电量 ...
安卓手机充电慢_苹果和安卓手机充电新玩法：充电零钱自动涨效果
手机充电零钱自动涨效果首先,这个玩法苹果和安卓手机通用,只要在手机上安装有微信就可以实现手机充电零钱自动涨效果,操作方法非常简单,只需打开特定的小程序,然后将你的手机充上电,你的零钱就会自动上涨,一 ...
linux提取手机rom,提取安卓手机ROM固件中的APP
原标题:提取安卓手机ROM固件中的APP 很多品牌手机都会预装特色的APP,而这些APP却很难在第三方应用市场下载到.还好,我们可以从该手机ROM固件中提取中意的APP. 在手机官网通常可以下载各种版 ...
苹果手机充电孔变松了_用iPhone 12的MagSafe无线充电器给安卓手机充电？苹果：你想多了|充电器|安卓手机|手机|iphone|iphone手机...
在此前苹果的iPhone 12发布会上,除了iPhone 12 全系列手机以外,苹果还为我们带来了一些配件,其中具备无线磁吸充电功能的MagSafe充电器无疑是最受瞩目的. 根据苹果在发布会上的表述, ...
android 手机充电慢,安卓手机充电慢是怎么回事
很多人的手机都是在使用一年到两年后出现手机电池不耐用或者手机充电出现问题,一般出现这种问题的原因可能多是由于电池老化或者是充电器等问题导致的.本篇文章告诉大家手机充电慢解决方法,希望对大家有所帮助. ...

干货分享|巧用CSS滤镜绘制安卓手机充电动效(uni-app|view组件版)

前言