Guru Nanak dev ji Jayanti animation spéciale utilisant du code html css et javascript-js tutoriel-php.cn

Guru Nanak dev ji Jayanti animation spéciale utilisant du code html css et javascript

Mary-Kate Olsen

Libérer： 2024-11-26 04:56:14

original

274 Les gens l'ont consulté

Guru Nanak dev ji Jayanti special animation using html css and javascript code

<!DOCTYPE html>
<html lang="fr">
<tête>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <titre>Guru Nanak Jayanti Animation</titre>
    <style>
        corps {
            arrière-plan : dégradé linéaire (135 deg, #ffeb3b, #f57f17) ;
            affichage : flexible ;
            justifier-contenu : centre ;
            aligner les éléments : centre ;
            hauteur : 100vh ;
            débordement : caché ;
            marge : 0 ;
            famille de polices : « Poppins », sans empattement ;
            position : relative ;
        }
        .conteneur {
            alignement du texte : centre ;
            couleur : #fff ;
            animation : entrée et sortie faciles de fadeIn 2 ;
        }
        .conteneur img {
            largeur : 200 px ;
            hauteur : automatique ;
            marge inférieure : 10 px ;
            animation : lueur 2s alternative infinie ;
        }
        h1 {
            taille de police : 2rem ;
            texte-ombre : 0 0 10px rgba(255, 255, 255, 0.8) ;
        }
        .enseignements {
            marge supérieure : 20 px ;
            affichage : flexible ;
        }
        .boîte-d'enseignement {
            largeur : 160 px ;
            hauteur : 100px ;
            marge : 10px automatique ;
            remplissage : 15 px ;
            arrière-plan : #333 ;
            rayon de bordure : 12 px ;
            box-shadow : 0 4px 15px rgba(0, 0, 0, 0.2);
            opacité : 0 ;
            transformer: traduireY(50px);
            animation : slideUp 1,5 s vers l'avant ;
        }
        .teaching-box:ntième-enfant(1) {
            arrière-plan : #ff7043 ; /* Orange */
            délai d'animation : 0,5 s ;
        }
        .teaching-box:ntième-enfant(2) {
            arrière-plan : #42a5f5 ; /* Bleu */
            délai d'animation : 1 s ;
        }
        .teaching-box:ntième-enfant(3) {
            arrière-plan : #66bb6a ; /* Vert */
            délai d'animation : 1,5 s ;
        }
        .titre-enseignement {
            taille de police : 1,4rem ;
            poids de la police : gras ;
            marge inférieure : 5 px ;
        }
        .sous-texte d'enseignement {
            taille de police : 1rem ;
        }
        .fleurs {
            position : absolue ;
            haut : -50px ;
            largeur : 100 % ;
            hauteur : 100 % ;
            événements de pointeur : aucun ;
            affichage : flexible ;
            flex-wrap : envelopper ;
        }
        .fleur {
            position : absolue ;
            taille de police : 30 px ;
            animation : chute linéaire infinie ;
        }
        @keyframes tombent {
            from { transform : translateY(-100vh) rotate(0deg); }
            à { transformer : traduireY(100vh) rotation(360deg); }
        }
        @keyframes fadeIn {
            de { opacité : 0 ; }
            à { opacité : 1 ; }
        }
        @keyframes brillent {
            de { filtre : drop-shadow (0 0 10px #fff); }
            à { filter: drop-shadow(0 0 30px #ffeb3b); }
        }
        @keyframes slideUp {
            à { transformer : traduireY(0); opacité : 1 ; }
        }/* Bouton Fleur */
        .bouton-fleur {
            poste : fixe ;
            à droite : 20 px ;
            en bas : 20 px ;
            taille de police : 30 px ;
            arrière-plan : aucun ;
            bordure : aucune ;
            curseur : pointeur ;
            animation : lueur alternative infinie pendant 1,5 s ;
        }
    </style>
&Lt;/tête>
<corps>
    <div>

Copier après la connexion

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!