持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情

今天在收拾物品的时候，发现了很久不用的电池🔋，所以跟着我一起来做个电池吧。

电池

废弃的电池不要随意丢弃，可以做好垃圾回收，集中处理。

结构

电池的实现我们只需要一个元素就好了，如下：

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

样式

我们首先先对body做个处理，让电池更好的去展示，如下：

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
}

然后，我们需要准备先把电池的轮廓画出来，如下：

.battery {
    width: 5rem;
    height: 8rem;
    border: 0.1rem solid cyan;
    position: relative;
}

.battery::before {
    content: '';
    width: 1rem;
    height: 0.5rem;
    background-color: cyan;
    position: absolute;
    left: 50%;
    top: -0.5rem;
    transform: translateX(-50%);
    border-radius: 0.2rem 0.2rem 0 0;
}

再然后，我们需要对电池填充，如下：

.battery::after{
    content: '';
    width: 100%;
    height: 10%;
    background-color: rgb(255, 123, 0);
    position: absolute;
    left: 0;
    bottom: 0;
    animation: _animate 6s ease-in infinite;
}

@keyframes _animate {
    10%{
        box-shadow: 0 -1rem 0 0 rgb(255, 123, 0);

    }
    20%{
        box-shadow: 0 -1rem 0 0 rgb(255, 123, 0),
        0 -2rem 0 0 gold;

    }
    30%{
        box-shadow: 0 -1rem 0 0 rgb(255, 123, 0),
        0 -2rem 0 0 gold,
        0 -3rem 0 0 gold;

    }
    40%{
        box-shadow: 0 -1rem 0 0 rgb(255, 123, 0),
        0 -2rem 0 0 gold,
        0 -3rem 0 0 gold,
        0 -4rem 0 0 green;

    }
    50%{
        box-shadow: 0 -1rem 0 0 rgb(255, 123, 0),
        0 -2rem 0 0 gold,
        0 -3rem 0 0 gold,
        0 -4rem 0 0 green,
        0 -5rem 0 0 green;

    }
    60%{
        box-shadow: 0 -1rem 0 0 rgb(255, 123, 0),
        0 -2rem 0 0 gold,
        0 -3rem 0 0 gold,
        0 -4rem 0 0 green,
        0 -5rem 0 0 green,
        0 -6rem 0 0 green;

    }
    70%,100%{
        box-shadow: 0 -1rem 0 0 rgb(255, 123, 0),
        0 -2rem 0 0 gold,
        0 -3rem 0 0 gold,
        0 -4rem 0 0 green,
        0 -5rem 0 0 green,
        0 -6rem 0 0 green,
        0 -7rem 0 0 green;
    }
}

电池的填充使用到了动画，然后结合阴影效果去呈现出来。

总结

结合box-shadow去实现一些效果有时候是非常实用的，它不仅可以是视觉效果更加有冲击力，也可以省去很多dom元素。

因为今天没有复杂的动画，所以就不使用代码片段功能了，代码都已贴出，初学的小伙伴可以看一下。