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

 

前言

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绘制图标的案例带你重新认识CSS的魅力

详细解析:uni-app|vue组件实现会撒娇的旗帜徽章纯CSS动效

 

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页