先上效果
CSS炫酷水波效果是一种能够为网页增添生动感和动态美的技术。它模拟了水面波纹的自然流动，为用户带来一种新颖的互动体验。
完整代码
以下是完整代码：
HTML:
<div class="container"> <h2>HELLO</h2> <h2>HELLO</h2> </div>
CSS:
*{ margin: 0; padding: 0; box-sizing: border-box; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #000; } .container{ position: relative; } .container h2{ position: absolute; font-size: 8em; transform: translate(-50%,-50%); } .container h2:nth-child(1){ color: transparent; -webkit-text-stroke: 4px skyblue; } .container h2:nth-child(2){ color: skyblue; animation: animate 4s ease-in-out infinite; } @keyframes animate { 0%,100%{ -webkit-clip-path: polygon(0 51%, 18% 72%, 46% 73%, 65% 60%, 82% 67%, 100% 46%, 99% 98%, 0% 99%); clip-path: polygon(0 51%, 8% 82%, 46% 73%, 65% 60%, 82% 67%, 100% 46%, 99% 98%, 0% 99%); } 50%{ -webkit-clip-path: polygon(0 55%, 16% 37%, 35% 53%, 60% 40%, 80% 57%, 100% 46%, 99% 98%, 0% 99%); clip-path: polygon(0 55%, 16% 37%, 35% 53%, 60% 40%, 80% 57%, 100% 46%, 99% 98%, 0% 99%) } }
