Html & Css : Ajoutez L’effet Arc-en-Ciel Animé dans votre site
Créer un site web attrayant visuellement est essentiel pour capter l’attention de vos visiteurs. Parmi les nombreux effets que vous pouvez ajouter, un arc-en-ciel animé en bas de votre page est un choix simple mais impressionnant.
Cet effet crée une barre lumineuse, subtilement animée, qui ajoute une touche d’élégance à votre site.
Dans cet article, nous allons voir comment implémenter cet effet avec un code source facile à intégrer.
Le Code Source
Voici le code que vous pouvez utiliser pour ajouter cet effet à votre site web :
Html
Le code HTML structure la page et inclut les éléments nécessaires pour l’effet arc-en-ciel animé.
<div class="animeTFZ">
<div class="animeBlurTFZ"></div>
</div>CSS
Le code CSS est utilisé pour styliser et animer l’effet arc-en-ciel.
/* Barre animée */
.animeTFZ{
box-sizing: border-box;
position: fixed;
width: 100%; /* Prend toute la largeur de la page */
bottom: 0;
left: 0;
right: 0;
height: 5px; /* Hauteur de la barre principale */
z-index: 51; /* Assure que la barre est visible au-dessus d'autres éléments */
background: linear-gradient(-45deg, #0050ff, #000040, #000080, #111, #ff0000, #0000ff, #000000, #000005); /* Dégradé de couleurs créant l'effet arc-en-ciel */
background-size: 200%;
animation: animeBar 5s linear infinite; /* Animation continue de l'effet */
}
/* Effet flou de la barre */
.animeBlurTFZ{
box-sizing: border-box;
position: fixed;
width: 100%; /* Prend toute la largeur de la page */
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(-45deg, #0050ff, #000040, #000080, #111, #ff0000, #0000ff, #000000, #000005); /* Le même dégradé pour l'effet de flou */
background-size: 200%;
animation: animeBar 5s linear infinite; /* Animation continue de l'effet */
height: 25px; /* Hauteur de la barre floue */
z-index: 50; /* Placée derrière la barre principale */
filter: blur(10px); /* Ajoute un effet de flou pour une esthétique douce */
opacity: .7; /* Rend la barre floue légèrement transparente */
}
/* Animation du dégradé */
@keyframes animeBar{
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}Explication du Code
Le Structure du HTML
Le HTML ici est très simple, il consiste en deux divs imbriqués.
- Le premier div, avec la classe `animeTFZ`, est la barre principale colorée.
- Le second div, avec la classe `animeBlurTFZ`, est la barre floue qui apparaît juste en dessous pour ajouter un effet de profondeur et de subtilité.
CSS pour l’Esthétique
`animeTFZ`: Cette classe définit la barre principale qui apparaît en bas de la page. Le dégradé de couleurs est animé grâce à l’animation CSS `animeBar. Cela donne l’illusion que les couleurs glissent le long de la barre.
`animeBlurTFZ` : Cette classe crée un effet de flou sous la barre principale, lui donnant un aspect plus doux et diffus. Cela aide à ajouter un niveau de sophistication à l’effet global.
L’animation est contrôlée par la règle `@keyframes animeBar`, qui change la position du dégradé sur l’axe horizontal.
Le dégradé se déplace de gauche à droite puis revient, créant ainsi un effet de mouvement fluide et continu.
Code source complet :
<style type="text/css">
/* Barre animée */
.animeTFZ{
box-sizing: border-box;
position: fixed;
width: 100%; /* Prend toute la largeur de la page */
bottom: 0;
left: 0;
right: 0;
height: 5px; /* Hauteur de la barre principale */
z-index: 51; /* Assure que la barre est visible au-dessus d'autres éléments */
background: linear-gradient(-45deg, #0050ff, #000040, #000080, #111, #ff0000, #0000ff, #000000, #000005); /* Dégradé de couleurs créant l'effet arc-en-ciel */
background-size: 200%;
animation: animeBar 5s linear infinite; /* Animation continue de l'effet */
}
/* Effet flou de la barre */
.animeBlurTFZ{
box-sizing: border-box;
position: fixed;
width: 100%; /* Prend toute la largeur de la page */
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(-45deg, #0050ff, #000040, #000080, #111, #ff0000, #0000ff, #000000, #000005); /* Le même dégradé pour l'effet de flou */
background-size: 200%;
animation: animeBar 5s linear infinite; /* Animation continue de l'effet */
height: 25px; /* Hauteur de la barre floue */
z-index: 50; /* Placée derrière la barre principale */
filter: blur(10px); /* Ajoute un effet de flou pour une esthétique douce */
opacity: .7; /* Rend la barre floue légèrement transparente */
}
/* Animation du dégradé */
@keyframes animeBar{
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
</style>
<div class="animeTFZ">
<div class="animeBlurTFZ"></div>
</div>Cet effet d’arc-en-ciel animé est un ajout simple mais puissant pour enrichir l’apparence de votre site web.
Il capte l’œil sans être envahissant, offrant une touche de modernité et d’élégance.
Vous pouvez facilement personnaliser les couleurs et la vitesse de l’animation pour qu’elles correspondent à l’identité visuelle de votre site.
N’hésitez pas à expérimenter avec d’autres effets ou à combiner cet effet avec d’autres éléments de design pour un impact encore plus fort.
Après tout, les petits détails font toute la différence dans la création d’une expérience utilisateur mémorable !
