Water Wave Effects in CSS Part 2
How to make water wave effect on text in CSS
/*CSS*/
*,*::before,*::after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
width: 100%;
min-height: 100vh;
background: #222;
font-family: sans-serif;
}
body h1{
font-size: 10em;
font-weight: 900;
text-transform: uppercase;
color: transparent;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
body h1:nth-child(1){
-webkit-text-stroke: 2px rgba(0,188,212,1);
}
body h1:nth-child(2){
color: rgba(0,188,212,0.7);
animation: waterWave 4s ease-in-out infinite;
animation-delay: 0.3s;
}
body h1:nth-child(3){
color: rgba(0,188,212,0.4);
animation: waterWave 4s ease-in-out infinite;
animation-delay: 0.5s;
}
body h1:nth-child(3){
color: rgba(0,188,212,0.2);
animation: waterWave 4s ease-in-out infinite;
animation-delay: 0.7s;
}
@keyframes waterWave{
0%,100%{
clip-path: polygon(0% 42%, 14% 44%, 28% 49%, 37% 54%, 48% 59%, 61% 62%, 72% 61%, 82% 57%, 91% 51%, 100% 47%, 100% 100%, 0 100%);
}
50%{
clip-path: polygon(0 73%, 9% 69%, 17% 64%, 24% 61%, 38% 58%, 54% 60%, 69% 55%, 78% 50%, 89% 42%, 100% 40%, 100% 100%, 0 100%);
}
}
Watch video Water Wave Effects in CSS Part 2 online without registration, duration hours minute second in high quality. This video was added by user Masters In Web Design 25 January 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 26 once and liked it 4 people.