HTML CSS と JavaScript コードを使用した、Guru Nanak dev ji Jayanti の特別アニメーション-jsチュートリアル-php.cn

HTML CSS と JavaScript コードを使用した、Guru Nanak dev ji Jayanti の特別アニメーション

Mary-Kate Olsen

リリース： 2024-11-26 04:56:14

オリジナル

261 人が閲覧しました

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

<!DOCTYPE html>
<html lang="ja">

    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=device-width、initial-scale=1.0">
    <title>グル ナナク ジャヤンティ アニメーション</title>
    
        体 {
            背景: 線形グラデーション(135度、#ffeb3b、#f57f17);
            ディスプレイ: フレックス;
            コンテンツの位置揃え: 中央;
            整列項目: 中央;
            高さ: 100vh;
            オーバーフロー: 非表示;
            マージン: 0;
            フォントファミリー: 'ポピンズ'、サンセリフ;
            位置: 相対的;
        }
        。容器 {
            テキスト整列: 中央;
            色: #fff;
            アニメーション: フェードイン 2 秒イーズインアウト;
        }
        .container img {
            幅: 200ピクセル;
            高さ: 自動;
            マージン-ボトム: 10px;
            アニメーション: グロー 2 秒無限代替。
        }
        h1 {
            フォントサイズ: 2rem;
            テキストシャドウ: 0 0 10px rgba(255, 255, 255, 0.8);
        }
        .教え {
            マージントップ: 20px;
            ディスプレイ: フレックス;
        }
        .ティーチングボックス {
            幅: 160ピクセル;
            高さ: 100ピクセル;
            マージン: 10px 自動;
            パディング: 15px;
            背景: #333;
            境界半径: 12px;
            ボックスシャドウ: 0 4px 15px rgba(0, 0, 0, 0.2);
            不透明度: 0;
            変換:translateY(50px);
            アニメーション: slideUp 1.5 秒進みます。
        }
        .teaching-box:nth-child(1) {
            背景: #ff7043; /* オレンジ */
            アニメーション遅延: 0.5秒;
        }
        .teaching-box:nth-child(2) {
            背景: #42a5f5; /* 青 */
            アニメーション遅延: 1秒;
        }
        .teaching-box:nth-child(3) {
            背景: #66bb6a; /* 緑 */
            アニメーション遅延: 1.5秒;
        }
        .teaching-Heading {
            フォントサイズ: 1.4rem;
            フォントの太さ: 太字;
            マージン-ボトム: 5px;
        }
        .teaching-subtext {
            フォントサイズ: 1rem;
        }
        .flowers {
            位置: 絶対;
            上: -50px;
            幅: 100%;
            高さ: 100%;
            ポインターイベント: なし。
            ディスプレイ: フレックス;
            フレックスラップ: ラップ;
        }
        。花 {
            位置: 絶対;
            フォントサイズ: 30px;
            アニメーション: 直線的に無限に落下します。
        }
        @keyframes が落ちる {
            from { 変換: 変換Y(-100vh) 回転(0度); }
            に { 変換: 変換 Y(100vh) 回転(360 度); }
        }
        @keyframes フェードイン {
            から { 不透明度: 0; }
            { 不透明度: 1; }
        }
        @keyframes グロー {
            { フィルター: ドロップシャドウ(0 0 10px #fff); から}
            { フィルター: ドロップシャドウ(0 0 30px #ffeb3b); }
        }
        @keyframes slideUp {
            に { 変換:translateY(0);不透明度: 1; }
        }/* 花ボタン */
        .flower-button {
            位置: 固定;
            右: 20ピクセル;
            下: 20ピクセル;
            フォントサイズ: 30px;
            背景: なし。
            境界線: なし。
            カーソル: ポインタ;
            アニメーション: グロー 1.5 秒の無限代替。
        }
    </スタイル>
</head>

    <div>




          </div>

ログイン後にコピー

以上がHTML CSS と JavaScript コードを使用した、Guru Nanak dev ji Jayanti の特別アニメーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。