Constellation Knowledge Network - Preguntas y respuestas sobre la interpretación de los sueños - ¿Cómo hacer un corazón que late con el código html+css más simple?

¿Cómo hacer un corazón que late con el código html+css más simple?

<! ¿TIPO DE DOCUMENTO? html y gt

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>

上篇: Mi hermano dio a luz a un guapo GG. Ayudemosle a encontrar un bonito nombre. 下篇: ¿Quieres abrir una tienda de grabado publicitario? ¿Puedes darme un nombre?
Artículos populares