Las páginas web directas y sencillas son buenas, pero no las mejores. La animación es lo que le da vida a una página estática y la hace más llamativa.
Aquí hay algunas ideas de animación para sus páginas web utilizando lenguajes de interfaz como HTML y CSS.
1. Rotar una Carta: El primero es rotar una carta. La tarjeta tiene dos cosas: el anverso y el reverso cuando pasamos el mouse sobre la tarjeta, girará 180 grados y mostrará solo el reverso.
Explicación: Aquí, el primer cuerpo completo tiene el estilo de la imagen. El botón se diseña de acuerdo a su necesidad y creatividad. Lo principal aquí es la rotación al principio, la parte trasera está oculta o rotada 180 grados y cuando nos desplazamos sobre la tarjeta, la parte frontal gira -180 grados y la parte trasera se acerca al frente.
A continuación se muestra el ejemplo que ilustra la animación de la tarjeta giratoria .
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
color: hsl(209, 61%, 16%);
background: #fff;
;
}
img {
width: 100%;
display: block;
}
.btn {
background: white;
color: rgb(64, 119, 64);
padding: 0.375rem 0.75rem;
letter-spacing: 3px;
display: inline-block;
border: 2px solid transparent;
border-radius: .5rem;
cursor: pointer;
}
.blog {
background: hsl(210, 36%, 96%);
}
.card {
height: 500px;
position: relative;
width: 500px;
margin-left: 30rem;
}
.card-side {
-webkit-transition: all 2s linear;
transition: all 2s linear;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0.5rem;
visibility: visible;
}
.card-back {
background: rgb(55, 116, 75);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
display: grid;
place-items: center;
}
.card:hover .card-front {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.card:hover .card-back {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
.card-info {
padding: 1rem 1.5rem;
}
.card-front img {
height: 13rem;
-o-object-fit: cover;
object-fit: cover;
height: 500px;
}
</style>
</head>
<body>
<div class="section blog">
<div class="card">
<!-- front of the card -->
<div class="card-side card-front">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20201113113041/paintorder1.png"
alt="" />
</div>
<!-- card back -->
<div class="card-side card-back">
<button class="btn">
Read More
</button>
</div>
</div>
</div>
</body>
</html>
Producción:
Tarjeta giratoria
2. Texto moviéndose hacia arriba y hacia abajo: en esta animación, el texto subirá al pasar el mouse sobre él y, en el caso de un dispositivo móvil, al hacer clic, el texto subirá.
Explicación: Al principio, los textos hacia abajo se cubren con el desbordamiento oculto y el valor negativo inferior. Y cuando nos desplazamos sobre la tarjeta, el texto frontal sube usando valores negativos de translateY y el texto hacia abajo se muestra haciendo que el valor inferior sea cero. El gradiente lineal se utiliza para leer el texto con claridad. La transición juega un papel importante ya que hace que las cosas funcionen sin problemas. El resto del código es solo para diseñar y hacer las cosas bien.
A continuación se muestra el ejemplo que ilustra la animación Texto moviéndose hacia arriba y hacia abajo .
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.services-container {
max-width: 600px;
margin: 0 auto;
color: #e0e2db;
background: url(
https://media.geeksforgeeks.org/wp-content/uploads/20201113113041/paintorder1.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.service-item {
overflow: hidden;
position: relative;
padding: 80px;
}
.service-item-black {
background: linear-gradient(
rgba(0, 0, 0, 0.7),
rgba(0, 0, 0, 0.7)
);
}
.front-text {
text-align: center;
transition: transform 2s;
}
.back-text {
position: absolute;
bottom: -15em;
width: 75%;
margin: 0 auto;
height: 100%;
transition: bottom 2s;
padding: 15px 0;
}
.back-text h1 {
margin-bottom: 20px;
}
.back-text button {
margin-top: 20px;
padding: 10px 20px;
background: transparent;
border: 2px solid #30804b;
font-size: 20px;
color: #30804b;
}
.back-text button:hover {
background-color: #30804b;
color: #191716;
}
.service-item:hover .front-text {
transform: translateY(-200px);
}
.service-item:hover .back-text {
bottom: 0;
}
</style>
</head>
<body>
<div class="services-container">
<article class="service-item
service-item-black">
<div class="front-text">
<h1>Geeks For Geeks</h1>
</div>
<div class="back-text">
<h1>Geeks For Geeks</h1>
<p>
A Computer Science portal for geeks.
A Computer Science portal for geeks.
A Computer Science portal for geeks.
</p>
<button type="button">Read More</button>
</div>
</article>
</div>
</body>
</html>
Producción:
3. Texto que aparece al pasar el mouse: en esta animación, aparece el texto al pasar el mouse por la imagen y la imagen se amplía.
Explicación: Lo primero es hacer que el texto desaparezca, lo que se hace haciendo que la opacidad sea cero. Ahora, al pasar el mouse sobre la imagen, la imagen se ampliará y la propiedad de desbordamiento oculto se asegura de que la parte exterior de la imagen cuando se amplía no se salga de la altura y el ancho determinados. Y al pasar el cursor haciendo visible la opacidad del texto de la imagen. La propiedad de transición acaba de facilitar las cosas.
A continuación, se muestra el ejemplo que ilustra la animación Texto que aparece al pasar el mouse .
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#projects {
padding: 20px 0 80px 0;
background-color: #e0e2db;
}
.projects-container {
max-width: 40vw;
margin: 0 auto;
}
.projects-item {
position: relative;
background: linear-gradient(
rgba(0, 0, 0, 0.9),
rgba(0, 0, 0, 0.9)
);
color: #e0e2db;
overflow: hidden;
margin: 10px 0;
}
#projects img {
width: 100%;
min-height: 100%;
transition: transform 2s;
display: block;
}
.img-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
opacity: 0;
transition: opacity 4s;
}
.img-text h1 {
font-size: 40px;
margin-bottom: 10px;
}
.img-text h6 {
font-size: 20px;
}
.projects-item:hover img {
opacity: 0.4;
transform: scale(1.3);
}
.projects-item:hover .img-text {
opacity: 1;
}
</style>
</head>
<body>
<div id="projects">
<div class="projects-container">
<article class="projects-item">
<img alt="image"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20201113113041/paintorder1.png">
<div class="img-text">
<h1>GeeksforGeeks</h1>
<h6>
It is a computer Science
portal for geeks.
</h6>
</div>
</article>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por shreasikhan2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA