HTML CSSとJSコードを使用したクリスマスツリーアニメーション-jsチュートリアル-php.cn

HTML CSSとJSコードを使用したクリスマスツリーアニメーション

Mary-Kate Olsen

リリース： 2024-12-27 22:16:11

オリジナル

907 人が閲覧しました

Christmas Tree animation using html css and js code

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

  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=device-width、initial-scale=1.0">
  <title>3D クリスマス ツリー</title>
  
    体 {
      ディスプレイ: フレックス;
      コンテンツの位置揃え: 中央;
      整列項目: 中央;
      高さ: 100vh;
      マージン: 0;
      背景色: #000;
      視点: 1000ピクセル; /* シーンに遠近感を追加します */
    }
    。木 {
      位置: 相対的;
      変換スタイル: 3d を保存; /* 子が 3D 空間でレンダリングされるようにします */
      変換: 回転X(30度); /* 正しい方向を向くように木を回転します */
    }
    。星 {
      位置: 絶対;
      フォントサイズ: 12px;
      不透明度: 0;
      アニメーション: きらめく 1 秒の無限代替、5 秒前に表示されます。
    }
    @keyframes きらきら {
      { 不透明度: 1; から}
      { 不透明度: 0.5; }
    }
    @キーフレームが表示されます {
      から { 不透明度: 0; }
      { 不透明度: 1; }
    }
  </スタイル>
</head>

  <div>




          </div>

ログイン後にコピー

以上がHTML CSSとJSコードを使用したクリスマスツリーアニメーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。