Cada año, el 14 de febrero, muchas personas intercambian tarjetas, dulces, regalos o flores con su especial "San Valentín". El día del romance que llamamos San Valentín lleva el nombre de un mártir cristiano y se remonta al siglo V, pero tiene sus orígenes en la fiesta romana de Lupercalia.
Ok hasta ahora todo bien. Pero, ¿qué puede hacer un programador por su San Valentín?
Mi respuesta es: ¡usa CSS y sé creativo!
Realmente amo el CSS. No es un lenguaje realmente sofisticado (ni siquiera se considera un lenguaje de programación la mayor parte del tiempo). Pero con algo de geometría, matemáticas y algunas reglas básicas de CSS, ¡puedes convertir tu navegador en un lienzo de tu creatividad!
Así que comencemos. ¿Cómo crearías un corazón con geometría pura?
Solo necesitas un cuadrado y dos círculos. ¿Correcto?
Y podemos sacar que con un solo elemento, gracias a las ::aftery ::beforelos pseudo elementos. Hablando de pseudo elementos, ::afteres un pseudo elemento que te permite insertar contenido en una página desde CSS (sin necesidad de que esté en el HTML). ::beforees exactamente igual, solo que inserta el contentantes de cualquier otro contenido en el HTML en lugar de después.
Para ambos pseudo elementos, el resultado final no está realmente en el DOM, pero aparece en la página como si lo estuviera.
Así que creemos nuestro corazón.
.heart { background-color: red; display: inline-block; height: 50px; margin: 0 10px; position: relative; top: 0; transform: rotate(-45deg); position: absolute; left: 45%; top: 45%; width: 50px; } .heart:before, .heart:after { content: ""; background-color: red; border-radius: 50%; height: 50px; position: absolute; width: 50px; } .heart:before { top: -25px; left: 0; } .heart:after { left: 25px; top: 0; }Usted puede fácilmente cuenta de que definimos la plaza y su posicionamiento mediante el uso de la clase principal 'corazón' y los dos círculos con las ::beforey ::afterlos pseudo elementos. Los círculos son en realidad solo 2 cuadrados más cuyo radio de borde se reduce a la mitad.
Pero, ¿qué es un corazón sin latir?
Creemos un pulso. Aquí vamos a utilizar la regla @keyframes. La regla @keyframes CSS se utiliza para definir el comportamiento de un ciclo de una animación CSS.
Cuando usamos la regla de fotogramas clave, podemos dividir un período de tiempo en partes más pequeñas y crear una transformación / animación dividiéndola en pasos (cada paso corresponde a un porcentaje de la finalización del período de tiempo).
Así que creemos el latido del corazón. Nuestra animación de latidos consta de 3 pasos:
@keyframes heartbeat { 0% { transform: scale( 1 ); } 20% { transform: scale( 1.25 ) translateX(5%) translateY(5%); } 40% { transform: scale( 1.5 ) translateX(9%) translateY(10%); } }- En el 0% del período de tiempo, comenzamos sin transformación.
- En el 20% del período de tiempo, escalamos nuestra forma al 125% de su tamaño inicial.
- En el 40% del período de tiempo, escalamos nuestra forma al 150% de su tamaño inicial.
Durante el 60% restante del período de tiempo, dejamos tiempo para que nuestro corazón vuelva a su estado inicial.
Finalmente tenemos que asignar la animación a nuestro corazón.
.heart { animation: heartbeat 1s infinite; // our heart has infinite heartbeat :) ... }¡Eso es!
Tenemos un corazón que late para siempre.
O tal vez mientras dure tu propio amor ...
No dude en consultar el Codepen relacionado:
¡Te deseo un maravilloso día de San Valentín!