充电效果模拟

目录

需求

思路分析与代码实现

实现效果

总结

---

需求

继续摸鱼......

突发奇想，如何实现一个手机充电效果呢？类似于......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%;