Guru Nanak dev ji Jayanti spezielle Animation mit HTML-CSS und Javascript-Code-js-Tutorial-php.cn

Guru Nanak dev ji Jayanti spezielle Animation mit HTML-CSS und Javascript-Code

Mary-Kate Olsen

Freigeben： 2024-11-26 04:56:14

Original

227 Leute haben es durchsucht

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

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Guru Nanak Jayanti Animation</title>
    <Stil>
        Körper {
            Hintergrund: linear-gradient(135deg, #ffeb3b, #f57f17);
            Anzeige: Flex;
            rechtfertigen-Inhalt: Mitte;
            align-items: center;
            Höhe: 100 Vh;
            Überlauf: versteckt;
            Rand: 0;
            Schriftfamilie: „Poppins“, serifenlos;
            Position: relativ;
        }
        .container {
            Textausrichtung: Mitte;
            Farbe: #fff;
            Animation: FadeIn 2s Easy-In-Out;
        }
        .container img {
            Breite: 200px;
            Höhe: automatisch;
            Rand unten: 10px;
            Animation: Leuchten 2s unendlich abwechselnd;
        }
        h1 {
            Schriftgröße: 2rem;
            Textschatten: 0 0 10px rgba(255, 255, 255, 0,8);
        }
        .Lehre {
            Rand oben: 20px;
            Anzeige: Flex;
        }
        .teaching-box {
            Breite: 160px;
            Höhe: 100px;
            Rand: 10 Pixel automatisch;
            Polsterung: 15px;
            Hintergrund: #333;
            Randradius: 12px;
            Box-Shadow: 0 4px 15px rgba(0, 0, 0, 0,2);
            Deckkraft: 0;
            transform: TranslateY(50px);
            Animation: slideUp 1,5s vorwärts;
        }
        .teaching-box:nth-child(1) {
            Hintergrund: #ff7043; /* Orange */
            Animationsverzögerung: 0,5 s;
        }
        .teaching-box:nth-child(2) {
            Hintergrund: #42a5f5; /* Blau */
            Animationsverzögerung: 1s;
        }
        .teaching-box:nth-child(3) {
            Hintergrund: #66bb6a; /* Grün */
            Animationsverzögerung: 1,5 s;
        }
        .teaching-heading {
            Schriftgröße: 1,4rem;
            Schriftstärke: fett;
            Rand unten: 5px;
        }
        .teaching-subtext {
            Schriftgröße: 1rem;
        }
        .Blumen {
            Position: absolut;
            oben: -50px;
            Breite: 100 %;
            Höhe: 100 %;
            Zeigerereignisse: keine;
            Anzeige: Flex;
            Flex-Wrap: wickeln;
        }
        .Blume {
            Position: absolut;
            Schriftgröße: 30px;
            Animation: Fall linear unendlich;
        }
        @keyframes fallen {
            from { transform: translatorY(-100vh) rotate(0deg); }
            zu { transform: translatorY(100vh) rotate(360deg); }
        }
        @keyframes fadeIn {
            von { Deckkraft: 0; }
            zu { Deckkraft: 1; }
        }
        @keyframes leuchten {
            from { filter: drop-shadow(0 0 10px #fff); }
            to { filter: drop-shadow(0 0 30px #ffeb3b); }
        }
        @keyframes slideUp {
            zu { transform: translatorY(0); Deckkraft: 1; }
        }/* Blumenknopf */
        .flower-button {
            Position: fest;
            rechts: 20px;
            unten: 20px;
            Schriftgröße: 30px;
            Hintergrund: keiner;
            Grenze: keine;
            Cursor: Zeiger;
            Animation: Leuchten 1,5 s unendlich abwechselnd;
        }
    </style>
</head>
<Körper>
    <div>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonGuru Nanak dev ji Jayanti spezielle Animation mit HTML-CSS und Javascript-Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!