¿Cómo hacer un corazón que late con el código html+css más simple?
y lthtml? lang="es "
& lthead & gt
& ltmeta? charset="UTF-8 "
& lttitle & gtAnswer? ¿Corazón? ¿Manifestación? </title>
<estilo? tipo="texto/css"? rel="hoja de estilo"
. ¿recipiente? {
Ancho:? 300px
Altura:? 240px
Margen:? Automático;
Posición:? Relativo;
}
@keyframe? Latido del corazón: ¿izquierda? {
0%,?100%?{
Transformación:? ¿Escala (0,95)? Rotación (-45 grados);
Transformación-Origen:? 0?100%;
}
50%?{
Transformación:? ¿Relación (1,00)? Rotación (-45 grados);
Transformación-Origen:? 0?100%;
}
}
@Fotograma clave? Latido del corazón, ¿verdad? {
0%,?100%?{
Transformación:? ¿Escala (0,95)? Girar (45 grados);
Transformación-Origen:? 100%?100%;
}
50%?{
Transformación:? ¿Relación (1,00)? Girar (45 grados);
Transformación-Origen:? 100%?100%;
}
}
. Izquierda,? . ¿Está bien? {
Ubicación:? Absolutamente;
arriba:? 0;
Ancho:? 150 px;
Altura:? 240px
Radio del borde:? ¿150 píxeles? ¿150 píxeles? 0?0;
Fondo:? Coral claro;
Animación-Iteración-Conteo:? Infinito;
Retraso de animación:? 500 ms
Función de sincronización de animación:? Curva de Bézier cúbica (0,?0,?0,?1,74);
Animación-Reproducción-Estado:? Ejecutando;
Animación-Duración:? 2000 ms
}
. ¿izquierda? {
Nombre-animación:? Latido del corazón-Izquierdo;
Izquierdo:? 150 px;
Transformación: Rotación (-45 grados);
Transformación-Origen:? 0?100%;
Sombra de caja:? ¿insertar? ¿6 píxeles? ¿6 píxeles? 0?6px? rgba(255,?255,?255,?0.1);
}
.
¿Está bien? {
Correcto:? 150 px;
Transformación: Rotación (45 grados);
Nombre de animación:? Latido del corazón——Sí;
Origen de la transformación:? 100%?100%;
Sombra de caja:? ¿insertar? -6px? -6px? 0?6px? rgba(255,?255,?255,?0.1);
}
& lt/style & gt;
& lt/head & gt;
& ltbody & gt
& ltdiv? class="contenedor " >>p>
& ltdiv? class="izquierda " >& lt/div & gt;
& ltdiv? class="right " >& lt/div & gt;
& lt/div & gt;
& lt/body & gt;
& lt /html>