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%);
}
}
Смотрите видео Water Wave Effects in CSS Part 2 онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Masters In Web Design 25 Январь 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 26 раз и оно понравилось 4 людям.