我怎样才能使海浪更高？

Question

我想弄清楚我做错了什么。

我已经创建了这个水效果文本，但我希望波浪应该几乎在文本的 85% 处，现在它可能在 50% 左右。

此外，波浪的宽度有时不会覆盖文本的整个宽度，因为它是一个计数器并且没有时间限制，所以数字在概念上也可以是无限的，我希望波浪独立地覆盖整个文本它的长度。

这是一个小提琴：https://jsfiddle.net/6txf03od/。

function diff_seconds(dt2, dt1) //Secondi
{

  dt1 = new Date();
  dt2 = new Date("December 7, 2022 11:30:00");

  var diff = (dt2.getTime() - dt1.getTime()) / 1000;

  //per ore   diff /= (60 * 60);
  //per minuti   diff /= (60 * 1);
  //per giorni   diff /= (60 * 60)*24;

  return Math.abs(Math.round(diff));

}

function printx() {
  var dt1, dt2;
  var contatore = 0;

  contatore = diff_seconds(dt1, dt2) * 80;
  document.getElementById("contatore").innerHTML = contatore;
  document.getElementById("contatorex").innerHTML = contatore;

}

setInterval(printx, 1000);

@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
h2 {
  font-family: "Poppins", sans-serif;
}

.content h2 {
  color: red;
  font-size: 90px;
  position: absolute;
  left: 27% !important;
  right: 20% !important;
  transform: translate(-50%, -50%);
}

.content h2:nth-child(1) {
  color: transparent;
  -webkit-text-stroke: 1px black;
}

.content h2:nth-child(2) {
  color: #007fff;
  animation: animate 4s ease-in-out infinite;
}

@keyframes animate {
  0%,
  100% {
    clip-path: polygon( 0% 45%, 16% 44%, 33% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);
  }
  50% {
    clip-path: polygon( 0% 60%, 15% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);
  }
}

<section>
  <h2>Litri depurati</h2><br><br><br>
  <div class="content">
    <h2 id="contatorex"></h2>
    <h2 id="contatore"></h2>
  </div>
</section>

Answer 1

要将波浪移到文本上更高的位置，您可以调整动画关键帧中 clip-path 属性中的值。例如，您可以尝试将值从 0% 45% 和 100% 52% 更改为类似 0% 70% 和 100% 75% 的值，这会使文本上的波浪向上移动。

要使波浪覆盖文本的整个宽度，无论其长度如何，您可以将 clip-path 属性设置为 polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)。这将使波浪覆盖文本的整个宽度和高度。

以下是您如何更新代码以实现这些更改的示例：

.content h2 {
  color: red;
  font-size: 90px;
  position: absolute;
  left:27% !important;
  right:20% !important;
  transform: translate(-50%, -50%);
}

.content h2:nth-child(1) {
  color: transparent;
  -webkit-text-stroke: 1px black;
}

.content h2:nth-child(2) {
  color: #007fff;
  animation: animate 4s ease-in-out infinite;
}

@keyframes animate {
  0%,
  100% {
    clip-path: polygon(
      0% 70%,
      16% 69%,
      33% 75%,
      54% 85%,
      70% 86%,
      84% 84%,
      100% 77%,
      100% 100%,
      0% 100%
    );
  }

  50% {
    clip-path: polygon(
      0% 85%,
      15% 90%,
      34% 91%,
      51% 87%,
      67% 75%,
      84% 70%,
      100% 71%,
      100% 100%,
      0% 100%
    );
  }
}

Answer 2

为确保波浪覆盖整个文本宽度，您可以将包含文本的元素的宽度设置为 100%

此外，您可以调整 clip-path 属性中的值以更好地匹配波浪的形状和位置

代码：

function diff_seconds(
  dt1 = new Date(), 
  dt2 = new Date("December 7, 2022 11:30:00")
) {
  const diff = (dt2.getTime() - dt1.getTime()) / 1000
  return Math.abs(Math.round(diff))
}

function printx() {
  let dt1, dt2
  let contatore = 0 
  contatore = diff_seconds(dt1, dt2) * 80
  document.getElementById("contatore").innerHTML = contatore
  document.getElementById("contatorex").innerHTML = contatore

}

setInterval(printx, 1000)

@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");

h2 {
  font-family: "Poppins", sans-serif;
}

.content h2 {
  width: 100%;
  color: red;
  font-size: 90px;
  position: absolute;
  top: 10% !important;
  left: 51% !important;
  right: 20% !important;
  transform: translate(-50%, -50%);
}

.content h2:nth-child(1) {
  color: transparent;
  -webkit-text-stroke: 1px black;
}

.content h2:nth-child(2) {
  color: #007fff;
  animation: animate 4s ease-in-out infinite;
}

@keyframes animate {
  0%,
  85% {
    clip-path: polygon( 0% 45%, 18% 44%, 36% 50%, 60% 60%, 75% 61%, 90% 59%, 100% 52%, 100% 100%, 0% 100%);
  }
  50% {
    clip-path: polygon( 0% 60%, 18% 65%, 36% 66%, 60% 62%, 75% 50%, 90% 45%, 100% 46%, 100% 100%, 0% 100%);
  }
}

<section>
  <h2>Litri depurati</h2><br><br><br>
  <div class="content">
    <h2 id="contatorex"></h2>
    <h2 id="contatore"></h2>
  </div>
</section>