La propiedad CSS clip-path se usa para recortar la región de tal manera que se muestren los elementos en las regiones recortadas.
En este artículo, veremos cómo podemos usar el clip-path y @keyframes juntos para crear una animación de imagen.
Paso 1: cree un div con un contenedor de clase que debe incluir la etiqueta <img>.
<!DOCTYPE html> <html> <head> <title>Clip-Path Animation</title> </head> <body> <h2>Welcome to GFG</h2> <!--div with class container contains img tag --> <div class="container"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200717172614/authPreLogo.png" alt="logo"> </div> </body> </html>
Paso 2: Incluir propiedades CSS –
- Recortaremos la imagen al polígono inicialmente.
- Luego, vincule una animación a la etiqueta img.
- La animación se establece durante tres segundos en un bucle infinito.
- Ahora, especificaremos el estilo CSS dentro de los @keyframes que cambiarán la propiedad de ruta de recorte de un valor a otro.
<!DOCTYPE html>
<html>
<head>
<title>Clip-Path Animation</title>
<style>
.container {
/* Aligning all container elements
to center using flex */
display: flex;
justify-content: center;
align-items: center;
}
img {
width: 600px;
/* Cliping img into polygon shape*/
clip-path: polygon(50% 0%, 100% 38%,
82% 100%, 18% 100%, 0% 38%);
/* Setting animation for 3s in
an infinite loop */
animation: clipPath 3s infinite;
}
/* Creating animation name clipPath */
@keyframes clipPath {
0% {
/* clip-path property initially */
clip-path: polygon(50% 0%, 100% 38%,
82% 100%, 18% 100%, 0% 38%);
}
50% {
/* clip-path property at 50% */
clip-path: polygon(50% 50%, 90% 88%,
80% 10%, 20% 10%, 8% 90%);
}
100% {
/* clip-path property finally */
clip-path: polygon(50% 0%, 100% 38%,
82% 100%, 18% 100%, 0% 38%);
}
}
</style>
</head>
<body>
<h2>Welcome To GFG</h2>
<!--div with class container
which contain img tag -->
<div class="container">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200717172614/authPreLogo.png"
alt="Travel">
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por NANDINIJAIN y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA