使用 CSS 動(dòng)畫和 JavaScript 動(dòng)態(tài)控制波浪形狀，通過 clip-path 裁剪出波浪效果，結(jié)合進(jìn)度計(jì)算實(shí)現(xiàn)水位上升動(dòng)畫。

HTML 結(jié)構(gòu)

<div class="container">
  <div class="wave-container">
    <div class="wave wave1"></div>
    <div class="wave wave2"></div>
  </div>
  <div class="progress-text">0%</div>
</div>

CSS 樣式

.container {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #e0e0e0;
  position: relative;
  overflow: hidden;
}

.wave-container {
  position: absolute;
  width: 200%;
  height: 200%;
  left: -50%;
  top: 30%; /* 初始水位 */
  animation: wave-up 3s linear infinite;
}

.wave {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #2196f3;
  opacity: 0.8;
}

.wave1 {
  animation: wave-animation 4s infinite linear;
  clip-path: polygon(
    0% 60%, 
    10% 65%, 
    20% 60%, 
    30% 55%, 
    40% 50%, 
    50% 55%, 
    60% 60%, 
    70% 65%, 
    80% 60%, 
    90% 55%, 
    100% 50%, 
    100% 100%, 
    0% 100%
  );
}

.wave2 {
  animation: wave-animation 6s infinite linear;
  clip-path: polygon(
    0% 50%, 
    10% 55%, 
    20% 60%, 
    30% 65%, 
    40% 60%, 
    50% 55%, 
    60% 50%, 
    70% 45%, 
    80% 50%, 
    90% 55%, 
    100% 60%, 
    100% 100%, 
    0% 100%
  );
  opacity: 0.5;
}

@keyframes wave-animation {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes wave-up {
  to { top: -70%; } /* 根據(jù)進(jìn)度調(diào)整 */
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: #333;
}

JavaScript 控制

function setProgress(percent) {
  const container = document.querySelector('.wave-container');
  const text = document.querySelector('.progress-text');
  
  // 計(jì)算水位高度 (100%對(duì)應(yīng)top:-70%)
  const waterLevel = 30 - percent * 1; // 初始30%對(duì)應(yīng)0%
  container.style.top = waterLevel + '%';
  
  // 重置動(dòng)畫保證流暢
  container.style.animation = 'none';
  void container.offsetWidth; // 觸發(fā)重繪
  container.style.animation = `wave-up ${3 + percent/20}s linear forwards`;
  
  text.textContent = `${percent}%`;
}

// 示例：3秒內(nèi)進(jìn)度從0%到75%
let progress = 0;
const timer = setInterval(() => {
  progress += 1;
  setProgress(progress);
  if(progress >= 75) clearInterval(timer);
}, 30);

增強(qiáng)功能建議

1. 顏色漸變：使用 background: linear-gradient() 實(shí)現(xiàn)水面顏色漸變
2. 3D效果：添加 box-shadow 和旋轉(zhuǎn)動(dòng)畫模擬光照
3. 響應(yīng)式：通過 CSS 變量控制尺寸
4. 觸摸支持：添加事件監(jiān)聽實(shí)現(xiàn)拖動(dòng)調(diào)節(jié)

實(shí)現(xiàn)效果

• 雙波浪層交錯(cuò)運(yùn)動(dòng)
• 平滑的水位上升動(dòng)畫
• 動(dòng)態(tài)百分比顯示
• 波浪形變模擬真實(shí)液體效果

這個(gè)方案結(jié)合了 CSS 動(dòng)畫的性能優(yōu)勢(shì)和 JavaScript 的動(dòng)態(tài)控制能力，通過分層設(shè)計(jì)實(shí)現(xiàn)了逼真的水波效果。實(shí)際使用時(shí)可以根據(jù)需求調(diào)整波浪形狀、動(dòng)畫速度和顏色參數(shù)。