ホームページ >ウェブフロントエンド >CSSチュートリアル >魅惑の冬の王国 - 夏至を巡る旅
魅惑の冬の王国 - 夏至を巡る旅
- DDDオリジナル
- 2024-12-27 13:52:15334ブラウズ
これはフロントエンド チャレンジ - 12 月版、Glam Up My Markup: Winter Solstice への提出です
注: このプロジェクトの開発中に、冬至のテーマがこのチャレンジの他の参加者にも影響を与えていることに気づきました。これは、この季節の自然と魔法がいかにインスピレーションを与えるかを浮き彫りにします。私のインスピレーションは、冬に対する個人的なビジョンから来ており、その魅力の詳細と解釈に焦点を当てています。このプロジェクトが、この課題におけるアイデアの多様性に貢献することを願っています。
私が作ったもの
「Winter Solstice Magic」は、冬至の本質と魅力を捉えるように設計されたインタラクティブな Web シーンです。このプロジェクトには、太陽、月、星、オーロラ、降る雪などのアニメーション要素に加えて、輝く火、きらめく光、彗星の発射などの追加のお祝いの要素が含まれています。目標は、現代の Web テクノロジーの力を紹介しながら、見る人を冬の魔法に引き込む、視覚的に魅力的なエクスペリエンスを作成することでした。
デモ
ここでプロジェクトをライブで体験できます: Winter Solstice Magic Demo
完全なコードはここにあります:
<!DOCTYPE html>
<html lang="ja">
<メタ文字セット="UTF-8">
<meta name="viewport" content="width=device-width、initial-scale=1.0">
<title>冬至の風景</title>
体 {
マージン: 0;
オーバーフロー: 非表示;
背景: 線形グラデーション(下へ、#003366、#000);
ディスプレイ: フレックス;
コンテンツの位置揃え: 中央;
整列項目: 中央;
高さ: 100vh;
色: 白;
フォントファミリー: Arial、サンセリフ;
}
。空 {
位置: 絶対;
トップ: 0;
左: 0;
幅: 100%;
高さ: 100%;
背景: 線形グラデーション(先頭へ、#1e3c72、#2a5298);
z インデックス: -1;
アニメーション: skyTransition 20 秒無限代替。
}
。太陽 {
位置: 絶対;
幅: 80ピクセル;
高さ: 80ピクセル;
背景: 放射状グラデーション(circle, #ffcc00, #ff9900);
境界半径: 50%;
アニメーション: moveSun 8s 無限。
z インデックス: 1;
}
。月 {
位置: 絶対;
幅: 60ピクセル;
高さ: 60ピクセル;
背景: 放射状グラデーション(circle, #ffffff, #cccccc);
境界半径: 50%;
アニメーション: moveMoon 8s 無限。
z インデックス: 1;
不透明度: 0.8;
}
.stars {
位置: 絶対;
トップ: 0;
左: 0;
幅: 100%;
高さ: 100%;
ポインターイベント: なし。
z インデックス: 0;
}
。星 {
位置: 絶対;
幅: 3px;
高さ: 3px;
背景: 白;
境界半径: 50%;
不透明度: 0;
アニメーション: トゥインクル 3 秒無限。
}
.オーロラ {
位置: 絶対;
トップ: 0;
左: 0;
幅: 100%;
高さ: 100%;
背景: 放射状グラデーション(円、rgba(0、255、150、0.3)、透明);
不透明度: 0.4;
アニメーション: auroraEffect 10 秒無限代替;
z インデックス: -1;
}
.comet {
位置: 絶対;
幅: 10px;
高さ: 10ピクセル;
背景: 放射状グラデーション(円、#ffffff、透明);
境界半径: 50%;
ボックスシャドウ: 0 0 10px 5px #ffffff;
不透明度: 0.8;
アニメーション: flyComet 6s 無限。
}
.light-string {
位置: 絶対;
下：10％。
幅: 100%;
ディスプレイ: フレックス;
コンテンツの位置揃え: 均等なスペース;
}。ライト {
幅: 15px;
高さ: 15px;
背景: 赤;
境界半径: 50%;
アニメーション：blinkLight 2s 無限代替。
}
。タイトル {
位置: 絶対;
トップ: 50%;
左: 50%。
変換: 変換(-50%, -50%);
フォントサイズ: 3.5rem;
フォントファミリー: 'Cinzel Decorative'、筆記体;
色: #ffddcc;
テキストシャドウ: 3px 3px 10px #000;
不透明度: 0;
アニメーション: フェードインアウト 10 秒無限。
}
。火 {
位置: 絶対;
下: 5%;
左: 50%。
変換: 変換X(-50%);
幅: 50ピクセル;
高さ: 100ピクセル;
背景：radial-gradient(circle, rgba(255, 165, 0, 1), rgba(255, 69, 0, 0.7));
境界半径: 50%;
アニメーション: フリッカー 0.5 秒、無限。
}
@キーフレームのちらつき {
0%、100% {
変換: スケール(1);
不透明度: 0.8;
}
50% {
変換: スケール(1.2);
不透明度: 1;
}
}
。木 {
位置: 絶対;
下：10％。
左: calc(10% var(--position, 0%));
幅: 40ピクセル;
高さ: 60ピクセル;
背景: 線形グラデーション(下へ、#228B22、#006400);
クリップパス: ポリゴン(50% 0%, 0% 100%, 100% 100%);
}
@keyframes fadeInOut {
0%、100% {
不透明度: 0;
}
50% {
不透明度: 1;
}
}
@keyframesmoveSun {
0% {
トップ: 80%;
左: 10%。
}
50% {
トップ: 20%;
左: 50%。
}
100% {
トップ: 80%;
左: 90%。
}
}
@keyframesmoon{
0% {
トップ: 20%;
左: 90%。
}
50% {
トップ: 10%;
左: 50%。
}
100% {
トップ: 20%;
左: 10%。
}
}
@keyframesskyTransition {
0% {
背景: 線形グラデーション(先頭へ、#1e3c72、#2a5298);
}
50% {
背景: 線形グラデーション(先頭へ、#000428、#004e92);
}
100% {
背景: 線形グラデーション(先頭へ、#2c3e50、#4ca1af);
}
}
@keyframes きらきら {
0%、100% {
不透明度: 0;
}
50% {
不透明度: 1;
}
}
@keyframes auroraEffect {
0% {
変換:translateX(-20px)scale(1.2);
}
100% {
変換:translateX(20px)scale(1.5);
}}
@keyframesflyComet {
0% {
トップ: -10%;
左: 110%;
}
100% {
上: 110%;
左: -10%;
}
}
@keyframesblinkLight {
0% {
背景: 赤;
}
100% {
背景: 黄色;
}
}
</スタイル>
<link href="https://fonts.googleapis.com/css2?family=Cinzel Decorative:wght@400;700&display=swap" rel="stylesheet">
</head>
<div>
<p>以下はプロジェクトのプレビュー画像です:</p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173527873830508.jpg" alt="Enchanted Winter Realms - A Journey Through the Solstice"></p>
<h2>
旅
</h2>
<p>「冬至の魔法」の作成は、刺激的でやりがいのあるプロセスでした。これが私の旅の概要です:</p>
<h2>
アイデア
</h2>
<p>没入型の Web エクスペリエンスを通じて、冬至の美しさと神秘性を表現したいと思いました。このプロジェクトは、冬の自然要素と、この季節の平和でありながら活気に満ちた雰囲気にインスピレーションを受けました。</p>
<h2>
使用されている技術
</h2>
<ul>
<li>基本構造の HTML。</li>
<li>アニメーション、グラデーション、スタイル用の CSS。</li>
<li>雪の結晶、星、彗星の生成など、動的な対話性を実現する JavaScript。</li>
<li>「Cinzel Decorative」フォントを使用してタイトル テキストの美的魅力を高める Google フォント。</li>
</ul>
<h2>
主な特長
</h2>
<p><strong>動的背景:</strong> <em>空はグラデーション間をスムーズに遷移して、1 日のさまざまな時間を模倣します。</em></p>
<p><strong>インタラクティブな要素:</strong> <em>星がきらめき、雪の結晶が降り、彗星が画面を横切って走り、シーンに活気を与えます。</em></p>
<p><strong>お祭りの詳細:</strong> <em>きらめくライトと輝く火が季節の魅力を高めます。</em></p>
<p><strong>アクセシビリティ:</strong> <em>このプロジェクトは、視覚的に魅力的で軽量になるように設計されており、デバイス間でシームレスに動作します。</em></p>
<h2>
挑戦と学び
</h2>
<p>課題の 1 つは、さまざまなデバイスでスムーズなパフォーマンスを確保するためにアニメーションを最適化することでした。 CSS と JavaScript を使用したアニメーションのパフォーマンスの管理について多くを学びました。特に、ページの応答性を損なうことなく、複数のアニメーション要素をシームレスに統合できることを誇りに思っています。</p>
<h2>
次は何だろう
</h2>
<p>将来的には、次のことを行いたいと考えています。</p>
<p>冬をテーマにしたさりげない BGM や効果音などのオーディオ要素を追加します。</p>
<p>ユーザーの対話機能を導入し、視聴者がシーンの側面をカスタマイズできるようにします。</p>
<p>プロジェクトをさまざまな季節テーマをフィーチャーしたシリーズに拡張します。</p>
<h2>
ライセンス
</h2>
<p>このプロジェクトのコードは MIT ライセンスに基づいてライセンスされているため、誰でも無料で使用または適応できます。</p>
<h2>
謝辞
</h2>
<p>このチャレンジを主催し、プラットフォームを通じてインスピレーションを提供してくれた <strong>DEV コミュニティ</strong> に心より感謝いたします。私の応募を検討していただきありがとうございます! 『<strong><em>冬至の魔法</em></strong>』をお楽しみいただければ幸いです。</p>
</div>
以上が魅惑の冬の王国 - 夏至を巡る旅の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
JavaScript css html String for while using var pointer this href display position overflow margin border viewport background transform animation flex idea https Translate Other
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。