页面结构

结构比较简单，就一个div元素，用于实现电池的样式

    <div class="battery"></div>

初始样式

我们先清除body元素的默认内边距和外边距，然后再赋值上背景颜色

    body {
            width: 100%;
            height: 100%;
            background: #000;
            overflow: hidden;
        }

充电盒子样式

我们先清除元素的内边距和外边距，然后开启固定定位，然后结合transform: translate将元素垂直水平居中在页面的正中心，在进行旋转一定的角度，让他立起来，然后设置好宽高，设置好边框元素和边框圆角属性，最后给上一个背景渐变色，以及背景渐变色大小和背景位置,后面的充电特效我们是通过控制背景渐变色大小实现的

   .battery {
            margin: 0;
            padding: 0;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(-90deg);
            width: 60px;
            height: 30px;
            border: 10px solid #8c8cf3;
            border-radius: 5px;
            background-image: linear-gradient(to right, #fff,#fff);
            background-repeat: no-repeat;
            background-size: 30% 100%;
            background-position: 0 50%;
        }

充电盒子上面有个小头，我们这里使用伪元素的方式进行实现，我们给上绝对定位，通过定位结合transform: translate放到盒子的最右边，设置好宽高，在给上背景颜色，通过边框圆角属性，设置圆角

   .battery::after {
            content: "";
            position: absolute;
            right: 0;
            top: 50%;
            width: 10px;
            height: 20px;
            transform: translate(200%, -50%);
            background-color: #8c8cf3;
            border-radius: 0 5px 5px 0;
        }

充电特效实现

这里我们采用css动画进行实现，使用动画控制背景大小的改变

       @keyframes charge {
            100% {
                background-size: 100% 100%;
            }
        }

在给充电盒子设置上动画执行时间和进行无限执行

   .battery {
            animation: charge 2s infinite;
        }

CSS实现电池充电

页面结构

初始样式

充电盒子样式

充电特效实现