CSS动画新潮流：炫酷水波效果，让网页元素生动起来！

<div class="container">
        <h2>HELLO</h2>
        <h2>HELLO</h2>
    </div>

*{
    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%)
    }
}