女友最爱！教你用CSS轻松实现电池充电（水波纹特效）

前端

2023-10-02 22:23:53

了解需求：电池充电动画

为了吸引用户注意或者表达某种状态，比如设备正在充电时，动画能够提供一种直观且富有吸引力的方式。本文将指导如何使用纯CSS来创建一个电池充电动画效果，并附带浪漫的水波纹特效。

分析问题：实现方法

采用CSS中的关键帧（@keyframes）和伪元素技术，可以轻松制作出动态变化的效果。电池充电动画涉及两个主要部分：

电池形状的设计。
动态充电过程的表现。

设计电池形状

首先，定义电池的基本形状。使用div标签创建容器，并通过CSS设置边框、圆角等属性来模拟电池外形。

HTML代码

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

CSS代码

.battery {
    width: 200px;
    height: 45px;
    background-color: #333;
    position: relative;
    border-radius: 10px;
}

创建动态充电过程

下一步，使用CSS关键帧动画来表现电池充电动画。这里通过伪元素::before和::after来模拟电池内部的电量显示及水波纹特效。

CSS代码

.battery:before {
    content: '';
    position: absolute;
    width: 10px;
    height: 25px;
    background-color: #333;
    top: 10px;
    right: -7.5px;
    transform: rotate(45deg);
}

.battery::after {
    content: '';
    position: absolute;
    width: calc(100% - 20px); /* 调整宽度，确保动画效果流畅 */
    height: 30px;
    background-color: #9ECEFA; /* 模拟电量颜色 */
    top: 7.5px;
    left: 10px;
    border-radius: 10px;
    animation: chargeEffect 2s ease-in-out infinite;
}

@keyframes chargeEffect {
    from {width: 0;}
    to   {width: calc(100% - 20px);}
}

添加水波纹特效

为了增加视觉效果，可以添加一个简单的水波纹动画。这可以通过额外的伪元素::before和关键帧实现。

CSS代码

.battery:before {
    content: '';
    position: absolute;
    width: 10px;
    height: 25px;
    background-color: #333;
    top: 10px;
    right: -7.5px;
    transform: rotate(45deg);
}

.battery::after {
    content: '';
    position: absolute;
    width: calc(100% - 20px);
    height: 30px;
    background-color: #9ECEFA; /* 模拟电量颜色 */
    top: 7.5px;
    left: 10px;
    border-radius: 10px;
    animation: chargeEffect 2s ease-in-out infinite, waveEffect 1s linear infinite;
}

@keyframes waveEffect {
    from {background-color: #9ECEFA;}
    to   {background-color: rgba(255, 255, 255, 0.4);}
}