Wave inside Text es uno de los mejores efectos de texto que se utiliza para la decoración de texto en sitios web. Esta animación es una ilustración extraordinaria de una ola dentro del texto que llama la atención. Este efecto se puede usar para crear ondas dentro del texto, interfaz de usuario, efecto de ondas de agua en el texto.
Enfoque: la metodología es poner animación en el segundo hijo usando @keyframes, aquí apuntamos al segundo hijo del cuerpo por h5:nth-child(2) y ponemos animación dentro de él, ahora para animación tipo onda, necesitamos usar la propiedad clip-path de CSS y ahora con esta propiedad damos forma a la ruta del polígono para una estructura similar a una onda. Ahora comprendamos algunos conceptos básicos de CSS como @keyframes, n-th child property y clip-path property:
- Propiedad nth-child: El selector :nth-child() en CSS se usa para hacer coincidir los elementos en función de su posición en un grupo de hermanos.
- @keyframes: la propiedad @keyframes se utiliza para configurar animaciones usando CSS y dar la opción de dividir el tiempo de animación en partes/velocidad y reproducir una animación determinada para esa parte de la duración completa de la animación.
- propiedad clip-path: la propiedad clip-path de CSS se utiliza para cortar el segmento específico de la imagen hasta el punto de que se muestra parte de la imagen dentro del segmento y parte de la imagen fuera del segmento no se muestra.
A continuación se muestra la implementación del enfoque anterior:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Wave inside Text Animation</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Giving 1st child(first text in body)
basic transparent color and border */
h5:nth-child(1) {
color: transparent;
-webkit-text-stroke: 1px green;
}
/* Giving 2nd child(second text in body)
green colour along with animation property */
h5:nth-child(2) {
color: rgb(10, 124, 16);
animation: animate 7s ease-in-out infinite;
}
h5 {
top: 50%;
text-transform: uppercase;
position: absolute;
font-family: 'Segoe UI', Tahoma,
Geneva, Verdana, sans-serif;
transform: translate(calc(50vw - 50%), -55%);
font-size: 2em;
}
/* giving animation to 2nd child using @keyframes
and making wave like path using clip-path property */
@keyframes animate {
0%,
100% {
clip-path: polygon(0 45%, 6% 38%, 20% 27%,
38% 24%, 40% 47%, 49% 64%, 51% 72%,
74% 78%, 79% 75%, 100% 67%, 100% 100%,
0 100%);
}
50% {
clip-path: polygon(0 59%, 5% 71%, 24% 86%,
34% 71%, 41% 64%, 41% 46%, 51% 35%,
74% 21%, 89% 35%, 100% 42%, 100% 100%,
0 100%);
}
}
</style>
</head>
<body>
<h5>GeeksForGeeks</h5>
<h5>GeeksForGeeks</h5>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks-1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA