充电效果模拟

目录

需求

思路分析与代码实现

实现效果

总结

---

需求

继续摸鱼......

突发奇想，如何实现一个手机充电效果呢？类似于......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%;
      margin: 100px auto;
      border: 3px solid white;
      color: white;
      background-color: black;
      line-height: 300px;
      text-align: center;
      font-size: 50px;
      position: relative;
    }

    /* 清除外边距重叠 */
    .clearfix::before,
    .clearfix::after {
      content: '';
      display: table;
      clear: both;
    }

    .fire {
      width: 350px;
      height: 320px;
      position: absolute;
      top: calc(50% - 50px);
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .fire-content{
      width: 100%;
      height: 100%;
      animation: rotate 10s infinite both reverse linear;
    }

    @keyframes rotate{
      from{
        transform: rotate(0);
        background-color: azure;
        border-radius: 260px 80px;
      }

      25%{
        transform: rotate(90deg);
        background-color: beige;
        border-radius: 80px 260px;
      }

      50%{
        transform: rotate(180deg);
        background-color: bisque;
        border-radius: 260px 80px;
      }

      75%{
        transform: rotate(270deg);
        background-color: powderblue;
        border-radius: 80px 260px;
      }

      100%{
        transform: rotate(360deg);
        background-color: honeydew;
        border-radius: 260px 80px;
      }
    }

这里需要注意，当transform和animation作用于同一个元素，并且animation也操作了transform时，可能会引起混乱。为此，可以在元素外面包一个父元素，transform操作父元素，animation操作子元素。这样分开，就不会混乱了。

所以，我用动画操作fire-content，而用transform操作fire。

实现效果

还挺像那么回事的嘛！

总结

这次代码比较简单，没有什么特别的，只有在应用动画和transform的时候需要注意的那一点。

发布的时候提示文章质量过低。。。。哎，低就低吧！