Html & Css : Ajoutez L’effet Arc-en-Ciel Animé dans votre site

Tutoriel : Ajouter une barre d’animation d’arc-en-ciel en bas de votre page Web

Henry Fitiil y a 3 semaines

0 15 2 minutes de lecture

Dans ce tutoriel, nous allons apprendre à intégrer une barre d’animation avec un effet d’arc-en-ciel en bas d’une page web. Cette barre ajoutera une touche esthétique à votre site en affichant un dégradé de couleurs animées.

Aperçu de l’Animation d’Arc-en-Ciel

L’objectif est de créer une barre animée fixe en bas de la page avec un effet d’arc-en-ciel.

Cet effet crée une barre lumineuse, subtilement animée, qui ajoute une touche d’élégance à votre site. Nous utiliserons du CSS pour le style et l’animation, sans nécessiter de JavaScript.

Étape 1 : Structure HTML

Ajoutez une structure HTML de base pour intégrer votre barre d’arc-en-ciel.

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Barre d'Arc-en-Ciel</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Autres contenus de la page -->
    
    <!-- La barre animée -->
    <div class="animeTFZ">
        <div class="animeBlurTFZ"></div>
    </div>
</body>
</html>

Étape 2 : Style CSS

Voici le code CSS pour styliser et animer la barre. Il crée un dégradé de couleurs animé qui donne l’effet arc-en-ciel.

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, orange, #ff0000, #0000ff, yellow, green); /* 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, orange, #ff0000, #0000ff, yellow, green); /* 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

1. .animeTFZ :

Cette classe définit la barre d’animation principale.
Elle est positionnée en bas de la page et a un dégradé de couleurs.
L’animation utilise @keyframes pour animer le dégradé, créant ainsi l’effet de mouvement de l’arc-en-ciel.

2. .animeBlurTFZ :

Cette classe crée une version floue de la barre principale, donnant un effet visuel de brume.
Avec filter: blur(10px) et une opacité réduite, cela ajoute une profondeur esthétique à l’animation.

3. @keyframes animeBar :

Cette animation contrôle le défilement du dégradé en déplaçant background-position de 0% à 100% et revient à 0%, créant un effet de transition douce.

En suivant ces étapes, vous obtiendrez une barre animée avec un effet d’arc-en-ciel fixe en bas de votre page web.

Vous pouvez ajuster la vitesse, la hauteur, et les couleurs pour personnaliser davantage cette animation et rendre votre site plus attractif.

Télécharger le Code Source

Code Source : Rainbow (html/css)

Ce code source crée une barre animée avec un effet d’arc-en-ciel en bas de votre page web. En utilisant uniquement du CSS, la barre affiche un dégradé de couleurs vives en mouvement continu, ajoutant une touche dynamique et esthétique à votre site. Une seconde couche floue complète l’effet, créant un aspect doux et attrayant.

Caractéristiques :