Maison >interface Web >tutoriel CSS >Comment créer un effet d'animation d'appel en utilisant CSS ?
Comment créer un effet d'animation d'appel en utilisant CSS ?
- WBOYavant
- 2023-09-02 16:01:021651parcourir
Feuilles de style en cascade (CSS) permettent aux développeurs de créer des effets visuels pour vos pages Web afin de les rendre attrayantes et conviviales. CSS fournit diverses propriétés telles que les couleurs, la flexbox, la grille, les animations, les ombres, etc. pour styliser les éléments, ce qui donne un site Web attrayant et convivial pour de nombreux utilisateurs.
Dans cet article, nous avons expliqué comment créer des effets animatroniques à l'aide de conceptions HTML et CSS. Pour créer cet effet, nous utiliserons les propriétés d'animation CSS et la propriété box-shadow.
Animation CSS
Il permet aux développeurs d'ajouter des effets d'animation tels que des mouvements, des vibrations, etc. à nos pages Web pour augmenter la valeur esthétique.
Grammaire
animation: animation-name | animation-duration | speed;
Propriété CSS Box-shadow
Il permet aux développeurs de fournir des nuances sombres d'un côté et des nuances claires de l'autre.
Grammaire
box-shadow: values;
La valeur de cet attribut est -
Aucun - Aucune ombre n'est affichée sur l'élément. Il s'agit de la valeur par défaut.
Offset-X - La distance de l'ombre à l'élément dans la direction horizontale. Les valeurs positives pour offset-X projetteront une ombre sur le côté droit de l'élément, tandis que les valeurs négatives projetteront une ombre sur le côté gauche de l'élément.
Offset-Y - Contrôle la distance verticale de l'ombre à l'élément. Les valeurs positives placent l'ombre au-dessus de l'élément, les valeurs négatives placent l'ombre en dessous de l'élément.
Blur Radius - Il spécifie la netteté de l'ombre. Plus le nombre est élevé, plus l'ombre est floue, ce qui signifie que l'ombre sera plus grande et plus lumineuse
Spread- radius - Il spécifie la taille de l'ombre. Si sa valeur est positive, la taille augmente. Si négatif, la taille est réduite.
Color - Il spécifie la couleur de l'ombre.
Inset - Il permet aux développeurs de créer des ombres afin que le contenu d'un élément apparaisse en dessous de la bordure. Une ombre est donc créée à l’intérieur de la bordure.
Exemple
est :Exemple
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
border: 5px solid;
padding: 10px 15px;
box-shadow: -5px -10px 0px 5px yellow;
}
</style>
</head>
<body>
<h1>The box-shadow property</h1>
<article id="demo">
<p>This is an article element with a shadow. It contains four values that are offset-X (horizontal distance), offset-Y (vertical distance), spread radius and color. </p>
</article>
</body>
</html>
Créer des effets d'animation d'appel entrant
Dans l'exemple ci-dessous, nous essayons d'afficher une icône de sonnerie de téléphone à l'aide des icônes CSS Font Awesome.
Ensuite, nous avons utilisé la propriété box-shadow et les animations CSS pour créer l'effet de sonnerie. Afin de contrôler la séquence d'animation, nous avons utilisé @keyframes
Exemple
La traduction chinoise est :Exemple
.<!DOCTYPE html>
<html>
<head>
<title>Incoming Call Animation</title>
<link rel="stylesheet" href= "https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
<style>
body{
height: 80%;
margin: 10px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: black;
}
section{
position: absolute;
top: 10%;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid orange;
height: 65%;
width: 40%;
}
.call{
position: relative;
background: black;
color: orange;
font-size: 35px;
font-weight: bold;
width: 70px;
height: 70px;
border-radius: 100%;
border: solid 5px black;
animation: anim 2s ease-in infinite, vibration 2s ease-in infinite;
}
.img{
position: absolute;
top: 20px;
left: 20px;
height: 60px;
width: 50px;
}
@keyframes anim {
0% {
box-shadow: 0 1px 0 4px #ffffff;
}
10%{
box-shadow: 0 1px 0 8px rgba(255, 165, 0, 1);
}
25% {
box-shadow: 0 1px 0 12px rgba(255, 210, 128, 1), 0 1px 0 16px rgba(255, 201, 102, 1);
}
50% {
box-shadow: 0 2px 5px 10px rgba(255, 184, 51, 1), 0 2px 5px 23px rgba(248, 248, 255, 1);
}
}
@keyframes vibration {
0% { transform: rotate(0deg); }
25% { transform: rotate(20deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(-15deg); }
100% { transform: rotate(0deg); }
}
</style>
</head>
<body>
<section>
<div class= "call">
<i class= "fas fa-solid fa-phone img"> </i>
</div>
</section>
</body>
</html>
L'icône d'appel entrant sera affichée sur la page Web et l'effet de sonnerie sera observé par l'effet d'animation.
Conclusion
Les clients du marché des technologies modernes exigent une plus grande participation au site Web. À ce stade, l’animation joue un rôle essentiel dans l’amélioration de la communication. La nature interactive de l'animation encourage l'interaction de l'utilisateur et améliore l'expérience utilisateur. Si vous souhaitez que votre site Web se démarque de la concurrence et soit en même temps apprécié par votre public cible, il sera utile de faire appel à une société de développement de sites Web de premier plan pour ajouter des animations à votre site Web.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!