Especial de San Valentin: Animación de latido en CSS3

Este es un especial de San Valentin por si quieren añadir esto a algún proyecto o sorprender a alguna persona.

Si eres un forever-alone siguiendo el tutorial dejaras de serlo ... garantia de @leonidasesteban.

Para esto voy a usar un ~~patrón~~ bonito para el fondo, una imagen de un corazón y una fuente especial para que todo quede mas lindo, esto no afecta al efecto que lograremos con CSS3 solo lo hace mas lindo así que si lo tuyo es el código no tomes en cuenta esto

Todos estos ingredientes nos darán como resultado: -> ver ejemplo

Código HTML(5)

Código :

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<title>Latido</title>
<link href='http://fonts.googleapis.com/css?family=Allura' rel='stylesheet' type='text/css'>
<script src="../prefixfree.js"></script>

</head>

<body>
    <div id="latido">
       <h1 id="texto">Te quiero Licita</h1>
        <img src="corazon.png" alt="corazon" />
    </div>
</body>
</html>

En el código html estamos importando la tipografía que usaremos. Esta la encuentran en Google Web-fonts (cómo usar cualquier tipografía en HTML) por estas fechas esta muy de moda.

También importo una de mis scripts favoritos "prefix free", que sirve para evitar colocar todos los prefijos propietarios y hacer solo el CSS necesario en nuestros proyectos y luego solo una caja que contendrá un texto ~~random~~ con el nombre del ser amado.

Cabe destacar que es el "<h1>" y la imagen del corazón.

Código en CSS(3)

Código :

::selection{
   background:rgba(255,51,102,.5);
}
body{
   background:url("sanvalentin.jpg");
}
#latido{
   animation:7s latido infinite;
   color:white;
   font-family: 'Allura', cursive;
   font-size:40px;
   margin:0 auto;
   text-align:center;
   width:500px;
}
@keyframes latido{
   0%{transform:scale(1)}
   47%{transform:scale(1)}
   48%{transform:scale(.9)}
   50%{transform:scale(1.1)}
   52%{transform:scale(.9)}
   54%{transform:scale(1)}
}
#latido img{
   width:500px;   
}
#latido h1{
   position:absolute;
   left:10%;
   line-height:80px;
   top:10%;
   width:400px;
   
}

En el CSS estamos colocando todo en su lugar y lo especial esta en "#latido" le estamos dando un propiedad "animation".

Código :

animation:7s latido infinite;

animation es de mis propiedades favoritas y esta funcionando asi:

Código :

animation:"tiempo de la animación" "nombre de la animación" "veces que se repetirá la animación";

Nuestra animación dura 7 segundos, se llama latido y se repetirá infinitamente.

Luego usamos @keyframes "nombre de la animacion"{ } y dentro de esto expresamos el tiempo en porcentajes es decir en este caso el segundo 7 sera el 100%

Código :

@keyframes latido{
   0%{transform:scale(1)}
   47%{transform:scale(1)}
   48%{transform:scale(.9)}
   50%{transform:scale(1.1)}
   52%{transform:scale(.9)}
   54%{transform:scale(1)}
}

El truco de la animación es hacer pequeño el corazón, luego mas grande y esto lograrlo en un porcentaje corto de nuestra animación para que no se prolongue el efecto y no se repita todo el tiempo.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

heart-shape { position: relative; width: 100px; height: 90px; margin:10px 0px; } .heart-shape:before, .heart-shape:after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: #fd2d8a; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; } .heart-shape:after { left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin :100% 100%; }

Especial de San Valentin: Animación de latido en CSS3

Código HTML(5)

Código en CSS(3)

Publica tu comentario

o puedes...