Maison > Article > interface Web > Créer une animation de bordure en utilisant CSS
Créer une animation de bordure en utilisant CSS
- WBOYavant
- 2023-09-08 08:57:091211parcourir
CSS est utilisé pour créer des animations de bordure magnifiques et attrayantes, qui ajoutent du mouvement et de l'intérêt à une page Web. Pour créer une animation de bordure, nous devrons d'abord définir une bordure pour l'élément que nous voulons animer, puis nous le ferons. utilisez des transitions et des animations CSS pour ajouter du mouvement à la bordure
.Les animations de bordure peuvent être utilisées pour créer des effets de survol sur les boutons, les liens et d'autres éléments interactifs. Elles peuvent également être utilisées pour créer des animations de chargement qui montrent la progression pendant le chargement d'une page ou d'un élément. Nous pouvons également utiliser des animations de bordure sur les appels. -des boutons d'action pour les rendre plus visibles.
Approche - 1
nous allons créer un effet de survol qui anime la bordure d'un élément lorsqu'un utilisateur le survole.
Algorithme
Créez un document HTML et définissez le titre comme "Hover Effect Border Animation".
Configurez le corps du document, utilisez flexbox pour centrer la boîte et donnez-lui une couleur d'arrière-plan de #48b6ff
Définissez une classe de boîte avec un affichage en bloc en ligne, un remplissage de 10 px, une taille de police de 18 px, la couleur n° 333 et une bordure solide transparente de 2 px. Le temps de transition est de 0,5 s et l'effet de transition est facile.
Ajoutez une animation pulsée à la bordure avec une durée infinie et un timing d'entrée et de sortie facile. Estompez la bordure du rouge au vert puis au bleu lorsque la souris est sur la boîte et désactivez l'animation pulsée.
Définissez l'animation pulsée avec une image clé qui change la couleur de la bordure du rouge au vert puis au bleu. Ajouter un élément div avec une classe box au corps du document HTML
Enregistrez et affichez le fichier HTML dans un navigateur Web pour voir l'animation de la bordure de l'effet de survol.
Exemple
est :Exemple
<!DOCTYPE html>
<html>
<head>
<title>Hover Effect Border Animation</title>
<style>
/* Set up the body with flexbox to center the box */
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: #48b6ff;
min-height: 100vh;
}
/* Style the box with a transparent border */
.box {
display: inline-block;
padding: 10px;
font-size: 18px;
color: #333;
border: 2px solid transparent;
transition: border 0.5s ease;
/* Add the pulsing animation to the border */
animation: border-pulse 2s ease-in-out infinite;
}
/* When the box is hovered, change the border to a gradient and disable the pulsing animation */
.box:hover {
border-image: linear-gradient(to right, #f00, #0f0, #00f);
border-image-slice: 1;
animation: none;
}
/* Define the pulsing animation */
@keyframes border-pulse {
0% {
border-color: #f00;
}
50% {
border-color: #0f0;
}
100% {
border-color: #00f;
}
}
</style>
</head>
<body>
<!-- Add the box element to the HTML -->
<div class="box">
Hover over me
</div>
</body>
</html>
Méthode - 2
Ici, nous allons créer une animation de chargement en animant la bordure de l'icône de chargement.
Algorithme
Déclarez le type de document au format HTML à l'aide de la déclaration 8b05045a5be5764f313ed5b9168a17e6.
Démarrez le document HTML en ouvrant la balise 100db36a723c770d327fc0aef2ce13b1.
Ajoutez la balise 93f0f5c25f18dab9d176bd4f6de5d30e à l'intérieur de la balise 100db36a723c770d327fc0aef2ce13b1
À l'intérieur de la balise 93f0f5c25f18dab9d176bd4f6de5d30e, ajoutez une balise b2386ffb911b14667cb8f0f91ea547a7 et définissez le titre du document sur "Chargement de l'animation de bordure".
Ajoutez une balise c9ccee2e6ea535a969eb3f532ad9fe89 à l'intérieur de la balise 93f0f5c25f18dab9d176bd4f6de5d30e pour ajouter un style au document.
À l'intérieur de la balise c9ccee2e6ea535a969eb3f532ad9fe89, ajoutez des règles CSS pour styliser l'élément 6c04bd5ca3fcae76e30b72ad730ca86d, notamment en centrant l'animation de chargement et en définissant la couleur d'arrière-plan.
Ajoutez une règle CSS pour styliser l'animation de chargement en définissant sa taille, sa forme, la couleur de sa bordure et ses propriétés d'animation.
Créez une animation nommée "spin" en utilisant la règle @keyframes.
Ajoutez la règle de transformation pour faire pivoter l'élément de 360 degrés.
À l'intérieur de la balise 6c04bd5ca3fcae76e30b72ad730ca86d, ajoutez un élément dc6dce4a544fdca2df29d5ac0ea9906b avec une classe de "loading" pour afficher l'animation de chargement.
Exemple
est :Exemple
<!DOCTYPE html>
<html>
<head>
<title>Loading Border Animation</title>
<style>
/* Styling the body element to center the loading animation */
body{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
background-color: rgb(253, 114, 114);
}
/* Styling the loading element */
.loading {
width: 50px;
height: 50px;
border: 5px solid #ccc;
border-top-color: #3498db; /* Changing the top border color */
border-radius: 50%; /* Making the border round */
animation: spin 1s linear infinite; /* Adding animation to spin continuously */
margin: 50px auto; /* Centering the element with margin */
}
/* Defining the animation */
@keyframes spin {
to {
transform: rotate(360deg); /* Rotating the element 360 degrees */
}
}
</style>
</head>
<body>
<div class="loading"></div> <!-- The loading element -->
</body>
</html>
Approche - 3
Nous utiliserons CSS pour appliquer une animation de bordure au bouton d'appel à l'action.
Algorithme
Créez un récipient et centrez-le.
Stylisez l'élément avec une bordure initialement transparente et des propriétés de transition pour animer la bordure en 0,5 seconde.
Créez un effet de survol pour l'élément qui modifie la bordure en un dégradé linéaire de trois couleurs : rouge, vert et bleu.
Définissez une animation d'image clé appelée "border-pulse" pour changer la couleur de la bordure d'un élément au fil du temps.
Appliquez l'animation "border-pulse" à l'état initial de l'élément.
Lorsque l'élément est survolé, désactivez l'animation "border-pulse" en la réglant sur "aucun".
Exemple
est :Exemple
<!DOCTYPE html>
<html>
<head>
<title>Call to Action Border Animation</title>
<style>
/* Set the background color and center content vertically */
body {
background-color: #48b6ff;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
}
/* Style the button */
.cta-button {
display: inline-block;
position: relative;
padding: 16px 32px;
background-color: #ff4d4d;
color: #fff;
font-size: 24px;
text-transform: uppercase;
text-decoration: none;
border: none;
overflow: hidden;
transition: all 0.4s ease-out;
}
/* Add a pseudo-element to create the border animation */
.cta-button:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 100%;
background-color: #fff;
transform: translateX(-50%);
z-index: -1;
transition: all 0.4s ease-out;
}
/* Change the background and text color on hover */
.cta-button:hover {
background-color: #fff;
color: #ff4d4d;
}
/* Animate the pseudo-element to create the border animation */
.cta-button:hover:before {
width: 110%;
}
</style>
</head>
<body>
<a href="#" class="cta-button">Click Me</a>
</body>
</html>
Conclusion
Cependant, les animations de bordure peuvent parfois entraîner des problèmes de performances, en particulier lorsqu'elles sont surutilisées ou appliquées à des éléments volumineux, ce qui entraîne des temps de chargement de page plus lents et des performances globales inférieures. Certains navigateurs Web plus anciens peuvent ne pas prendre en charge certaines techniques d'animation.
Nous pouvons également créer des animations de bordure à l'aide de graphiques SVG et de JavaScript. Ils permettent des animations plus complexes et offrent plus de contrôle sur les animations.
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!