Maison >interface Web >js tutoriel >Guru Nanak dev ji Jayanti animation spéciale utilisant du code html css et javascript

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

Mary-Kate Olsenoriginal: 2024-11-26 04:56:14224parcourir

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>

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!

JavaScript css html Filter auto using pointer display position overflow margin padding border viewport background transform animation flex

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment puis-je signer des PDF en toute sécurité à l'aide de JavaScript et de l'API WebCrypto ?Article suivant：Comment puis-je signer des PDF en toute sécurité à l'aide de JavaScript et de l'API WebCrypto ?

Articles Liés

Voir plus