在現代網頁設計中，動畫效果是提升用戶體驗的重要手段之一。水波紋效果因其流暢、自然的視覺效果，常被用于按鈕點擊、加載動畫等場景。本文將介紹如何使用純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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
