目录
需求
继续摸鱼......
突发奇想,如何实现一个手机充电效果呢?类似于......emmm不太好找,所以省略了。总之就是,手机连接充电器后界面出现的动态效果。
思路分析与代码实现
这个显然也可以通过css动画实现。用一个圆圈显示当前电量,周围是一些颜色、形状都在变化的纯色区域。
实在不太好描述,直接上代码。
html部分
<div class="container clearfix">
<div class="fire">
<div class="fire-content"></div>
</div>
<div class="circle">
82.5%
</div>
</div>
css部分
.container {
width: 500px;
min-height: 600px;
background-color: black;
margin: 0 auto;
position: relative;
}
.circle {
width: 300px;
height: 300px;
border-radius: 50%;