将块的顶部作为海浪进行动画处理

如何解决将块的顶部作为海浪进行动画处理

我想为一个 div 的顶部制作动画，它充满了蓝色海洋般的颜色。

而且我希望动画假装小海浪。知道我的显示分辨率非常低（120px 宽度）。

我尝试过使用particles-js，学习如何添加运动效果很酷，但它不会让我的顶部看起来像海浪。

然后我尝试使用 CSS，试图理解一些现有的代码，目前我所做的最好的是：

:root {
  --bg-color: #dfffa9;
  --wave-color: #0048ff;
  --animation-time: 4s;
  --max-height: 15px;
  --circle-offset: -1.5%;
  --wave-width: 55%;
  --height-wave-up: 109%;
  --height-wave-down: 100%;
  --top-wave-up: 60%;
  --top-wave-down: 40%;
  --border-radius-right-up: 100% 50%;
  --border-radius-left-up: 50% 100%;
}

body {
  margin: 0;
  overflow: hidden;
  background: var(--wave-color);

}

.container {
  position: relative;
  height: 10vh;
  background: var(--bg-color);
}

.wave {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: var(--max-height);
  background: var(--bg-color);
  animation: beWavy var(--animation-time) infinite linear;
}

.wave::before,.wave::after {
  content: "";
  display: block;
  position: absolute;
  border-radius: var(--border-radius-right-up);
  width: var(--wave-width);
}

.wave::before {
  height: var(--height-wave-up);
  background-color: var(--wave-color);
  right: var(--circle-offset);
  top: var(--top-wave-up);
  animation: beWavyBefore var(--animation-time) infinite step-end;
}

.wave::after {
  height: var(--height-wave-down);
  background-color: var(--bg-color);
  left: var(--circle-offset);
  top: var(--top-wave-down);
  animation: beWavyAfter var(--animation-time) infinite step-end;
}

@keyframes beWavy {
  0% {
    animation-timing-function: ease-in;
    height: var(--max-height);
  }
  25% {
    animation-timing-function: ease-out;
    height: 0;
  }
  50% {
    animation-timing-function: ease-in;
    height: var(--max-height);
  }
  75% {
    animation-timing-function: ease-out;
    height: 0;
  }
  100% {
    animation-timing-function: ease-in;
    height: var(--max-height);
  }
}

@keyframes beWavyBefore {
  25% {
    background-color: var(--bg-color);
    height: var(--height-wave-down);
    top: var(--top-wave-down);
    border-radius: var(--border-radius-left-up);
  }
  75% {
    background-color: var(--wave-color);
    height: var(--height-wave-up);
    top: var(--top-wave-up);
    border-radius: var(--border-radius-right-up);
  }
}

@keyframes beWavyAfter {
  25% {
    background-color: var(--wave-color);
    height: var(--height-wave-up);
    top: var(--top-wave-up);
    border-radius: var(--border-radius-left-up);
  }
  75% {
    background-color: var(--bg-color);
    height: var(--height-wave-down);
    top: var(--top-wave-down);
    border-radius: var(--border-radius-right-up);
  }
}

<?PHP

?>

<!doctype html>
<html lang="fr">

<head>
  <Meta charset="UTF-8">
  <Meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
  <Meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Sea level</title>
  <link rel="stylesheet" href="CSS/style.css">
</head>

<body>



  <section class="container">

    <div class="wave"></div>

  </section>

但是 2 波似乎真的只是重复且成本低哈哈。我想要具有随机起点的随机波。所以如果有人能帮助我理解它是如何工作的，谢谢。

将块的顶部作为海浪进行动画处理

如何解决将块的顶部作为海浪进行动画处理

相关推荐