纯CSS怎么实现水波纹的电池充电动画特效

发布时间：2022-04-18 13:55:11 作者：zzz
来源：亿速云阅读：455

纯CSS怎么实现水波纹的电池充电动画特效

在现代网页设计中，动画效果是提升用户体验的重要手段之一。水波纹效果因其流畅、自然的视觉效果，常被用于按钮点击、加载动画等场景。本文将介绍如何使用纯CSS实现一个水波纹的电池充电动画特效。

1. 基本结构

首先，我们需要创建一个基本的HTML结构，用于表示电池和充电状态。以下是一个简单的HTML结构：

<div class="battery">
  <div class="battery-body">
    <div class="battery-cap"></div>
    <div class="battery-level"></div>
  </div>
</div>

.battery 是整个电池的容器。
.battery-body 是电池的主体部分。
.battery-cap 是电池的顶部盖子。
.battery-level 是表示电池电量的部分。

2. 基本样式

接下来，我们为电池添加一些基本样式：

.battery {
  position: relative;
  width: 100px;
  height: 200px;
  margin: 50px auto;
  border: 5px solid #333;
  border-radius: 10px;
  background-color: #f0f0f0;
}

.battery-body {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.battery-cap {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 10px;
  background-color: #333;
  border-radius: 5px 5px 0 0;
}

.battery-level {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  background-color: #4caf50;
  transition: height 2s ease-in-out;
}

.battery 设置了电池的宽度、高度、边框和背景颜色。
.battery-body 用于包含电池的主体部分，并设置了 overflow: hidden 以便后续的水波纹效果不会溢出。
.battery-cap 是电池的顶部盖子，设置了位置和样式。
.battery-level 是表示电量的部分，初始高度为0，并通过 transition 属性设置了高度变化的动画效果。

3. 水波纹效果

为了实现水波纹效果，我们可以使用 ::before 和 ::after 伪元素来创建两个圆形，并通过动画让它们从中心向外扩散。

.battery-level::before,
.battery-level::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  background-color: rgba(76, 175, 80, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: ripple 2s infinite;
}

.battery-level::after {
  animation-delay: 1s;
}

@keyframes ripple {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

.battery-level::before 和 .battery-level::after 分别创建了两个圆形，初始时缩放为0，并通过 animation 属性设置了 ripple 动画。
ripple 动画让圆形从中心向外扩散，并在扩散过程中逐渐消失。

4. 充电动画

最后，我们需要通过JavaScript或CSS动画来控制电池电量的变化。这里我们使用CSS动画来实现：

@keyframes charge {
  0% {
    height: 0;
  }
  100% {
    height: 100%;
  }
}

.battery-level {
  animation: charge 4s infinite;
}

charge 动画让 .battery-level 的高度从0%变化到100%，模拟电池充电的过程。
.battery-level 通过 animation 属性应用了 charge 动画，并设置为无限循环。

5. 完整代码

以下是完整的HTML和CSS代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>水波纹电池充电动画</title>
  <style>
    .battery {
      position: relative;
      width: 100px;
      height: 200px;
      margin: 50px auto;
      border: 5px solid #333;
      border-radius: 10px;
      background-color: #f0f0f0;
    }

    .battery-body {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
    }

    .battery-cap {
      position: absolute;
      top: -15px;
      left: 50%;
      transform: translateX(-50%);
      width: 30px;
      height: 10px;
      background-color: #333;
      border-radius: 5px 5px 0 0;
    }

    .battery-level {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 0;
      background-color: #4caf50;
      transition: height 2s ease-in-out;
      animation: charge 4s infinite;
    }

    .battery-level::before,
    .battery-level::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100px;
      height: 100px;
      background-color: rgba(76, 175, 80, 0.5);
      border-radius: 50%;
      transform: translate(-50%, -50%) scale(0);
      animation: ripple 2s infinite;
    }

    .battery-level::after {
      animation-delay: 1s;
    }

    @keyframes ripple {
      0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
      }
      100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
      }
    }

    @keyframes charge {
      0% {
        height: 0;
      }
      100% {
        height: 100%;
      }
    }
  </style>
</head>
<body>
  <div class="battery">
    <div class="battery-body">
      <div class="battery-cap"></div>
      <div class="battery-level"></div>
    </div>
  </div>
</body>
</html>

6. 总结

通过以上步骤，我们使用纯CSS实现了一个水波纹的电池充电动画特效。这个效果结合了CSS动画和伪元素的使用，展示了CSS在创建复杂动画效果方面的强大能力。你可以根据需要调整动画的速度、颜色和尺寸，以适应不同的设计需求。

纯CSS怎么实现水波纹的电池充电动画特效

纯CSS怎么实现水波纹的电池充电动画特效

1. 基本结构

2. 基本样式

3. 水波纹效果

4. 充电动画

5. 完整代码

6. 总结

相关阅读