ホームページ >ウェブフロントエンド >jsチュートリアル >HTML CSSとJSコードを使用したクリスマスツリーアニメーション
HTML CSSとJSコードを使用したクリスマスツリーアニメーション
- Mary-Kate Olsenオリジナル
- 2024-12-27 22:16:11901ブラウズ
<!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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。