冬至のお祝い。-CSSチュートリアル-php.cn

冬至のお祝い。

Mary-Kate Olsen

リリース： 2024-12-15 22:32:12

オリジナル

815 人が閲覧しました

Winter Solstice Celebrations.

冬至のお祝い: 科学、伝統、文化を探る

プロジェクト概要

このプロジェクトは、冬至に特化したインタラクティブで視覚的に魅力的な Web ページを紹介します。その科学的重要性、文化的重要性、そして世界中で祝われている伝統を掘り下げています。目標は、モダンなデザインと有意義なコンテンツを融合させ、魅力的でインタラクティブなエクスペリエンスを作成することです。

デモ

Winter Solstice プロジェクトのライブバージョンをプレビューし、以下のソースコードにアクセスできます:

ライブデモリンク

GitHub リポジトリ

旅

このプロジェクトのインスピレーションは、夏至の普遍的な重要性から生まれました。私は、科学的事実と文化的多様性の両方を、現代的で魅力的なインターフェイスを通じて提示したいと考えていました。このプロジェクトにより、次のことが可能になりました。

HTML、CSS、JavaScript を使用してフロントエンドのスキルを高めます。

スムーズなアニメーション、レスポンシブなデザイン、インタラクティブな要素を試してみましょう。

スムーズなスクロールと動的なボタンによるユーザーナビゲーションの最適化について学びます。

プロジェクトがどのように発展したかを次に示します:

HTML: 明確さと意味上の正確さを保つために構造化されたコンテンツ。
CSS: グラデーション背景、アニメーション、レスポンシブレイアウトでデザインを強化しました。
JavaScript: インタラクティブなナビゲーションとスクロールトリガー効果でページに命を吹き込みました。

私は、快適なユーザーエクスペリエンスを保証する、スムーズなアニメーション、レスポンシブなデザイン、トップへのスクロール機能を誇りに思っています。将来の改善には、夏至画像のカルーセルの追加や、ライブ夏至追跡用の API ベースのデータの統合が含まれる可能性があります。

コード

HTML

冬至のお祝い

冬至

科学、伝統、世界的な祝賀を探る

探検を始めましょう

はじめに
科学
半球
お祝い
伝統
結論

<main>
    <section>



<hr>

<p>CSS</p>

<p>/* Base Reset */</p>

<ul>
<li>{
margin: 0;
padding: 0;
box-sizing: border-box;
}</li>
</ul>

<p>/* Fonts and Colors */<br>
body {<br>
    font-family: 'Arial', sans-serif;<br>
    line-height: 1.6;<br>
    background: linear-gradient(to bottom, #001f3f, #1c1c1c);<br>
    color: #fff;<br>
}</p>

<p>header {<br>
    position: relative;<br>
    text-align: center;<br>
    color: #fff;<br>
    background: url('header-bg.jpg') no-repeat center center/cover;<br>
    height: 100vh;<br>
    display: flex;<br>
    flex-direction: column;<br>
    justify-content: center;<br>
    align-items: center;<br>
}</p>

<p>.header-overlay {<br>
    background: rgba(0, 0, 0, 0.5);<br>
    padding: 20px;<br>
    border-radius: 8px;<br>
}</p>

<p>header h1 {<br>
    font-size: 3rem;<br>
    margin-bottom: 10px;<br>
}</p>

<p>header p {<br>
    font-size: 1.2rem;<br>
    margin-bottom: 20px;<br>
}</p>

<p>.btn {<br>
    padding: 10px 20px;<br>
    font-size: 1.1rem;<br>
    color: #001f3f;<br>
    background: #ffcc00;<br>
    border: none;<br>
    border-radius: 5px;<br>
    cursor: pointer;<br>
    transition: all 0.3s ease;<br>
}</p>

<p>.btn:hover {<br>
    background: #e0ac00;<br>
}</p>

<p>main section {<br>
    padding: 40px 20px;<br>
    max-width: 800px;<br>
    margin: 20px auto;<br>
    background: rgba(255, 255, 255, 0.1);<br>
    border-radius: 8px;<br>
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);<br>
}</p>

<p>/* Animations */<br>
.fade-in {<br>
    opacity: 0;<br>
    transform: translateY(20px);<br>
    animation: fadeIn 1s forwards;<br>
}</p>

<p>@keyframes fadeIn {<br>
    to {<br>
        opacity: 1;<br>
        transform: translateY(0);<br>
    }<br>
}</p>

<p>footer {<br>
    text-align: center;<br>
    padding: 10px 0;<br>
    background: #111;<br>
    color: #fff;<br>
}</p>

<h2>
  
  
  scrollTopBtn {
</h2>

<pre class="brush:php;toolbar:false">position: fixed;
bottom: 20px;
right: 20px;
padding: 10px 15px;
background: #ffcc00;
color: #001f3f;
border: none;
border-radius: 50%;
cursor: pointer;
display: none;
transition: all 0.3s ease;

ログイン後にコピー

}

JavaScript

// セクションまでスムーズにスクロールします
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
動作: 'スムーズ'
});
});
});

// 一番上にスクロールするボタン
constscrollTopBtn = document.getElementById('scrollTopBtn');
window.addEventListener('scroll', () => {
if (window.scrollY > 300) {
スクロールトップBtn.style.display = 'ブロック';
} else {
scrollTopBtn.style.display = 'none';
}
});

scrollTopBtn.addEventListener('click', () => {
window.scrollTo({
上: 0、
動作: 'スムーズ'
});
});

結論

このプロジェクトは、冬至の重要性を反映しながら、最新の Web テクノロジーを活用して魅力的なユーザーエクスペリエンスを提供します。これは、創造的なデザイン、インタラクティブなナビゲーション、応答性の高い機能を実証しており、この課題の有力な候補となっています。この機会をいただきまして誠にありがとうございます。私の提出を検討していただければ幸いです。

以上が冬至のお祝い。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。