使用 animation实现几个小案列

学习了animation发现它真的好玩，以前写动画必须要JS才能完成，JS复杂性高，需要对DOM频繁操作会导致页面重绘重新排版，造成阻塞。虽然这里说了JS的缺点但是它也有它的优点，今天不作细讲（请看下回分解）。

今天主要用animation来实现几个小动画。

一、安卓手机充电效果

这个图都不陌生吧，今天将用代码来实现它！

首先写这个需要那些元素：

1. 最外层div ：g-container
2. 装充电百分比的盒子：g-number
3. 转动的圈圈 div g-circle ：
   外层带颜色的圈 before
   和里层的黑色圈 after
4. 最底部的的小圆球 ul、li实现；

需要的样式属性：

1. border-radius 调整div各个角的弧度
2. width height 宽、高
3. position 定位
4. filter 调整图像的颜色模糊值
5. animation 设置动画效果
   …

代码：

<div class="g-container">
        //电量
        <div class="g-number">98.7%</div>
        <div class="g-contrast">
            <div class="g-circle"></div>
              <ul class="g-bubbles">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul> 
        </div>
    </div>

在写CSS部分加上样式

.g-container {
   
	position:relative;
	width:300px;
	height:400px;
	margin:auto;
}
.g-number {
   
	position:absolute;
	width:300px;
	top:27%;
	text-align:center;
	font-size:32px;
	z-index:10;
	color:#fff;
}
.g-contrast {
   
	filter:contrast(15) hue-rotate(0);
	width:300px;
	height:400px;