在现代网页设计中，动画效果是提升用户体验的重要手段之一。水波纹效果因其流畅、自然的视觉效果，常被用于按钮点击、加载动画等场景。本文将介绍如何使用纯CSS实现一个水波纹的电池充电动画特效。
首先，我们需要创建一个基本的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 是表示电池电量的部分。接下来，我们为电池添加一些基本样式：
.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 属性设置了高度变化的动画效果。为了实现水波纹效果，我们可以使用 ::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 动画让圆形从中心向外扩散，并在扩散过程中逐渐消失。最后，我们需要通过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 动画，并设置为无限循环。以下是完整的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> 通过以上步骤，我们使用纯CSS实现了一个水波纹的电池充电动画特效。这个效果结合了CSS动画和伪元素的使用，展示了CSS在创建复杂动画效果方面的强大能力。你可以根据需要调整动画的速度、颜色和尺寸，以适应不同的设计需求。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
