En este artículo, aprenderemos cómo crear un efecto de animación de llamada entrante usando CSS .
Enfoque: para crear este efecto, básicamente necesitamos animar los efectos de sombra alrededor del marco del elemento, que se pueden manipular fácilmente usando el cuadro de sombra de CSS.propiedad. Se describe mediante compensaciones X e Y en relación con el elemento, el desenfoque y el radio de dispersión, y el color. Para crear el efecto de animación, usamos la propiedad de animación CSS , que nos permite configurar el tiempo, la duración y otros detalles de cómo progresa la secuencia de animación. Para controlar los pasos intermedios de la secuencia de animación, usamos @keyframes que nos permite especificar/alterar la propiedad de estilo CSS, en toda la duración de la secuencia de animación.
Sintaxis:
box-shadow: offset-x | offset-y | blur-radius | color
Código HTML: En “index.html”, definimos nuestro elemento, sobre el cual se va a trabajar el efecto de animación. Vincule la hoja de estilo que contiene el código de animación.
index.html
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>Incoming Call Animation</title> <meta name='viewport' content='width=device-width, initial-scale=1'> <link rel='stylesheet' type='text/css' media='screen' href='main.css'> <link rel="stylesheet" href= "https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity= "sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" /> </head> <body> <div class="call-animation"> <i class="fas fa-phone-volume caller-img"></i> </div> </body> </html>
Código CSS: en el archivo «main.css « , apuntamos al elemento usando el nombre de la clase, call-animation , que tiene una propiedad de animación CSS y especifica el nombre de la animación, la duración de la animación, la función de temporización de la animación y animación-iteración-recuento . Usando @keyframes , cambiamos la propiedad box-shadow de CSS , a intervalos de la secuencia de animación. Estos intervalos se especifican en porcentaje, donde 0 % representa el comienzo de la animación y 100 % representa la finalización de la animación.
main.css
html,body{
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #71AFFF;
}
.call-animation{
background: rgb(130, 221, 233);
width: 100px;
height: 100px;
border-radius: 100%;
border: solid 5px rgb(252, 241, 241);
animation: call 1.5s ease infinite;
color: aliceblue;
font-size: 35px;
font-weight: bold;
position: relative;
}
.caller-img{
position: absolute;
height: 50px;
width: 50px;
top: 35px;
left: 35px;
}
@keyframes call {
15% {
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5);
}
25% {
box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.5),
0 0 0 16px rgba(255, 255, 255, 0.3);
}
30% {
box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.5),
0 0 0 24px rgba(255, 255, 255, 0.3);
}
}
Producción:
Publicación traducida automáticamente
Artículo escrito por mostaptname y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA