我怎样才能使波浪更高？

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

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

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

代码：

 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%, 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>