La animación de volteo es el tipo de animación de carga en la que usamos un efecto de volteo cuadrado para dar la sensación de una animación de carga. Este tipo de animaciones son útiles en momentos en que el contenido del sitio web tarda demasiado en cargarse. Esta animación puede mantener a los visitantes interesados y evitar que abandonen su página web sin ver el contenido. El concepto principal detrás del trabajo de esta animación es la aplicación de transformación y @keyframes . Revíselos antes de intentar ejecutar este código.
Código HTML:: Cree un archivo HTML y cree un div en él.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>X and Y axis flip animation</title> </head> <body> <center> <h1>GeeksforGeeks</h1> <b> X and Y axis flip animation</b> <div class="geeks"></div> </center> </body> </html>
Código CSS: En CSS, lo primero que hemos hecho es proporcionar un fondo al cuerpo. Aplique fondo al div y algo de radio de borde para tener una esquina redondeada. Aplicar animación lineal con identificador llamado animate . Usando fotogramas clave aplicaremos animación a nuestro identificador. Estamos girando son cuadrados a lo largo del eje X durante los primeros medios marcos y a lo largo del eje Y durante el descanso. Esto no es obligatorio, pero puede cambiar los ángulos de rotación para tener un tipo diferente de efecto de volteo. Este es el efecto flip básico.
<style>
body {
margin: 0;
padding: 0;
}
h1 {
color: green;
}
.geeks {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background: green;
border-radius: 13px;
animation: animate 2s linear infinite;
}
@keyframes animate {
0% {
transform: translate(-50%, -50%)
perspective(200px)
rotateX(0deg)
rotateY(0deg);
}
50% {
transform: translate(-50%, -50%)
perspective(200px)
rotateX(-180deg)
rotateY(0deg);
}
100% {
transform: translate(-50%, -50%)
perspective(200px)
rotateX(-180deg)
rotateY(-180deg);
}
}
</style>
Solución final: Es la combinación de códigos HTML y CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>X and Y axis flip animation</title>
<style>
body {
margin: 0;
padding: 0;
}
h1 {
color: green;
}
.geeks {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background: green;
border-radius: 13px;
animation: animate 2s linear infinite;
}
@keyframes animate {
0% {
transform: translate(-50%, -50%)
perspective(200px)
rotateX(0deg)
rotateY(0deg);
}
50% {
transform: translate(-50%, -50%)
perspective(200px)
rotateX(-180deg)
rotateY(0deg);
}
100% {
transform: translate(-50%, -50%)
perspective(200px)
rotateX(-180deg)
rotateY(-180deg);
}
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<b> X and Y axis flip animation</b>
<div class="geeks"></div>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sirohimukul1999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA