Alam Musim Sejuk Terpesona - Perjalanan Melalui Solstis
Ini adalah penyerahan untuk Cabaran Frontend - Edisi Disember, Glam Up My Markup: Winter Solstice
Nota: Semasa pembangunan projek ini, saya perhatikan bahawa tema solstis musim sejuk juga telah memberi inspirasi kepada peserta lain dalam cabaran itu. Ini menyerlahkan betapa menginspirasikan alam semula jadi dan keajaiban musim ini. Inspirasi saya datang dari visi peribadi saya tentang musim sejuk, memfokuskan pada perincian dan tafsiran daya tarikannya. Saya harap projek ini menyumbang kepada kepelbagaian idea dalam cabaran ini.
Apa yang Saya Bina
"Sihir Solstis Musim Sejuk" ialah pemandangan web interaktif yang direka bentuk untuk menangkap intipati dan pesona solstis musim sejuk. Projek ini menampilkan elemen animasi seperti matahari, bulan, bintang, aurora borealis, salji yang turun dan sentuhan perayaan tambahan seperti api yang menyala, lampu berkelip dan komet menembak. Matlamatnya adalah untuk mencipta pengalaman visual yang menarik yang membenamkan penonton dalam keajaiban musim sejuk sambil mempamerkan kuasa teknologi web moden.
Demo
Anda boleh mengalami projek ini secara langsung di sini: Winter Solstice Magic Demo
Kod penuh tersedia Di sini:
<!DOCTYPE html>
<html lang="en">
<kepala>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adegan Solstis Musim Sejuk</title>
<gaya>
badan {
margin: 0;
limpahan: tersembunyi;
latar belakang: kecerunan linear(ke bawah, #003366, #000);
paparan: flex;
justify-content: pusat;
align-item: tengah;
ketinggian: 100vh;
warna: putih;
font-family: Arial, sans-serif;
}
.langit {
jawatan: mutlak;
atas: 0;
kiri: 0;
lebar: 100%;
ketinggian: 100%;
latar belakang: kecerunan linear(ke atas, #1e3c72, #2a5298);
indeks-z: -1;
animasi: skyTransition 20s silih berganti tanpa had;
}
.sun {
jawatan: mutlak;
lebar: 80px;
ketinggian: 80px;
latar belakang: radial-gradient(bulatan, #ffcc00, #ff9900);
jejari sempadan: 50%;
animasi: moveSun 8s tak terhingga;
indeks-z: 1;
}
.moon {
jawatan: mutlak;
lebar: 60px;
ketinggian: 60px;
latar belakang: radial-gradient(bulatan, #ffffff, #cccccc);
jejari sempadan: 50%;
animasi: moveMoon 8s tak terhingga;
indeks-z: 1;
kelegapan: 0.8;
}
.bintang {
jawatan: mutlak;
atas: 0;
kiri: 0;
lebar: 100%;
ketinggian: 100%;
pointer-events: tiada;
z-indeks: 0;
}
.bintang {
jawatan: mutlak;
lebar: 3px;
ketinggian: 3px;
latar belakang: putih;
jejari sempadan: 50%;
kelegapan: 0;
animasi: twinkle 3s infinite;
}
.aurora {
jawatan: mutlak;
atas: 0;
kiri: 0;
lebar: 100%;
ketinggian: 100%;
latar belakang: radial-gradient(bulatan, rgba(0, 255, 150, 0.3), lutsinar);
kelegapan: 0.4;
animasi: auroraEffect 10s tak terhingga silih berganti;
indeks-z: -1;
}
.comet {
jawatan: mutlak;
lebar: 10px;
ketinggian: 10px;
latar belakang: radial-gradient(bulatan, #ffffff, lutsinar);
jejari sempadan: 50%;
bayang-kotak: 0 0 10px 5px #ffffff;
kelegapan: 0.8;
animasi: flyComet 6s infinite;
}
.light-string {
jawatan: mutlak;
bawah: 10%;
lebar: 100%;
paparan: flex;
justify-content: ruang-sama rata;
}.cahaya {
lebar: 15px;
ketinggian: 15px;
latar belakang: merah;
jejari sempadan: 50%;
animasi: blinkLight 2s silih berganti tanpa had;
}
.title {
jawatan: mutlak;
atas: 50%;
kiri: 50%;
mengubah: terjemah(-50%, -50%);
saiz fon: 3.5rem;
font-family: 'Dekoratif Cinzel', kursif;
warna: #ffddcc;
bayang teks: 3px 3px 10px #000;
kelegapan: 0;
animasi: fadeInOut 10s tak terhingga;
}
.api {
jawatan: mutlak;
bawah: 5%;
kiri: 50%;
mengubah: translateX(-50%);
lebar: 50px;
ketinggian: 100px;
latar belakang: radial-gradient(bulatan, rgba(255, 165, 0, 1), rgba(255, 69, 0, 0.7));
jejari sempadan: 50%;
animasi: kelipan 0.5s tak terhingga;
}
@keyframes berkelip {
0%, 100% {
transform: skala (1);
kelegapan: 0.8;
}
50% {
transform: skala (1.2);
kelegapan: 1;
}
}
.pokok {
jawatan: mutlak;
bawah: 10%;
kiri: calc(10% var(--kedudukan, 0%));
lebar: 40px;
ketinggian: 60px;
latar belakang: kecerunan linear(ke bawah, #228B22, #006400);
laluan klip: poligon(50% 0%, 0% 100%, 100% 100%);
}
@keyframes fadeInOut {
0%, 100% {
kelegapan: 0;
}
50% {
kelegapan: 1;
}
}
@keyframes moveSun {
0% {
atas: 80%;
kiri: 10%;
}
50% {
atas: 20%;
kiri: 50%;
}
100% {
atas: 80%;
kiri: 90%;
}
}
@keyframes moveMoon {
0% {
atas: 20%;
kiri: 90%;
}
50% {
atas: 10%;
kiri: 50%;
}
100% {
atas: 20%;
kiri: 10%;
}
}
@keyframes skyTransition {
0% {
latar belakang: kecerunan linear(ke atas, #1e3c72, #2a5298);
}
50% {
latar belakang: kecerunan linear(ke atas, #000428, #004e92);
}
100% {
latar belakang: kecerunan linear(ke atas, #2c3e50, #4ca1af);
}
}
@keyframes berkelip {
0%, 100% {
kelegapan: 0;
}
50% {
kelegapan: 1;
}
}
@keyframes auroraEffect {
0% {
transform: translateX(-20px) skala(1.2);
}
100% {
transform: translateX(20px) skala(1.5);
}}
@keyframes flyComet {
0% {
atas: -10%;
kiri: 110%;
}
100% {
atas: 110%;
kiri: -10%;
}
}
@keyframes blinkLight {
0% {
latar belakang: merah;
}
100% {
latar belakang: kuning;
}
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Cinzel Decorative:wght@400;700&display=swap" rel="stylesheet">
</head>
<badan>
<div>
<p>Di bawah ialah imej pratonton projek:</p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173527873830508.jpg" class="lazy" alt="Enchanted Winter Realms - A Journey Through the Solstice"></p>
<h2>
Perjalanan
</h2>
<p>Mencipta "Sihir Solstice Musim Sejuk" merupakan satu proses yang menarik dan mencabar. Berikut ialah gambaran keseluruhan perjalanan saya:</p>
<h2>
Idea
</h2>
<p>Saya mahu menghidupkan keindahan dan mistik solstis musim sejuk melalui pengalaman web yang mengasyikkan. Projek ini diilhamkan oleh unsur-unsur semula jadi musim sejuk dan suasana musim yang damai namun meriah.</p>
<h2>
Teknologi yang Digunakan
</h2>
- HTML untuk struktur asas.
- CSS untuk animasi, kecerunan dan penggayaan.
- JavaScript untuk interaktiviti dinamik, termasuk penjanaan kepingan salji, bintang dan komet.
- Fon Google untuk meningkatkan daya tarikan estetik teks tajuk dengan fon "Hiasan Cinzel".
Ciri-ciri Utama
Latar Belakang Dinamik: Langit beralih dengan lancar antara kecerunan untuk meniru masa yang berbeza dalam sehari.
Elemen Interaktif: Bintang berkelip, kepingan salji jatuh dan komet melintasi skrin untuk menambah kehidupan pada pemandangan.
Butiran Perayaan: Lampu berkelip-kelip dan api yang menyala meningkatkan daya tarikan bermusim.
Kebolehaksesan: Projek ini direka bentuk untuk menarik secara visual dan ringan, memastikan ia berfungsi dengan lancar merentas peranti.
Cabaran dan Pembelajaran
Satu cabaran ialah mengoptimumkan animasi untuk memastikan prestasi lancar pada pelbagai peranti. Saya belajar banyak tentang mengurus prestasi animasi menggunakan CSS dan JavaScript. Saya amat berbangga dengan penyepaduan lancar berbilang elemen animasi tanpa menjejaskan responsif halaman.
Apa Seterusnya
Pada masa hadapan, saya ingin:
Tambahkan elemen audio, seperti muzik latar belakang bertema musim sejuk yang halus atau kesan bunyi.
Perkenalkan interaktiviti pengguna, membolehkan penonton menyesuaikan aspek adegan.
Kembangkan projek menjadi satu siri yang menampilkan tema bermusim yang berbeza.
Lesen
Kod untuk projek ini dilesenkan di bawah Lesen MIT, menjadikannya percuma dan terbuka untuk digunakan atau disesuaikan oleh sesiapa sahaja.
Ucapan terima kasih
Terima kasih khas kepada Komuniti DEV kerana menganjurkan cabaran ini dan memberikan inspirasi melalui platform mereka. Terima kasih kerana mempertimbangkan penyerahan saya! Saya harap anda menikmati "Sihir Solstis Musim Sejuk."
Atas ialah kandungan terperinci Alam Musim Sejuk Terpesona - Perjalanan Melalui Solstis. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1667
14
1426
52
1328
25
1273
29
1255
24
Perbandingan pembekal bentuk statik
Apr 16, 2025 am 11:20 AM
Mari kita cuba menyusun istilah di sini: "Penyedia Borang Statik." Anda membawa html anda
Bukti konsep untuk menjadikan sass lebih cepat
Apr 16, 2025 am 10:38 AM
Pada permulaan projek baru, kompilasi SASS berlaku dalam sekejap mata. Ini terasa hebat, terutamanya apabila ia dipasangkan dengan BrowserSync, yang dimuat semula
Berita Platform Mingguan: Atribut Memuat HTML, Spesifikasi ARIA Utama, dan Bergerak Dari IFRAME ke Shadow Dom
Apr 17, 2025 am 10:55 AM
Pada minggu ini, berita platform, Chrome memperkenalkan atribut baru untuk memuatkan, spesifikasi aksesibiliti untuk pemaju web, dan gerakan BBC
Beberapa tangan dengan elemen dialog HTML
Apr 16, 2025 am 11:33 AM
Ini saya melihat elemen HTML untuk kali pertama. Saya telah menyedarinya untuk seketika, tetapi Haven ' t mengambilnya untuk putaran lagi. Ia mempunyai cukup keren dan
Kertas kerja
Apr 16, 2025 am 11:24 AM
Beli atau Membina adalah perdebatan klasik dalam teknologi. Membina barang sendiri mungkin berasa lebih murah kerana tidak ada item baris pada bil kad kredit anda, tetapi
Di manakah 'Langgan Podcast' pautan ke?
Apr 16, 2025 pm 12:04 PM
Untuk sementara waktu, iTunes adalah anjing besar dalam podcasting, jadi jika anda mengaitkan "Langgan Podcast" untuk suka:
Pilihan untuk menganjurkan analisis berasaskan bukan JavaScript anda sendiri
Apr 15, 2025 am 11:09 AM
Terdapat banyak platform analisis untuk membantu anda mengesan data pelawat dan penggunaan di laman web anda. Mungkin paling penting Google Analytics, yang digunakan secara meluas
Ia ' s di kepala: Menguruskan Ketua Dokumen Tapak Berteakona dengan Helmet React
Apr 15, 2025 am 11:01 AM
Ketua dokumen mungkin bukan bahagian paling glamor dari laman web, tetapi apa yang masuk ke dalamnya boleh dikatakan sama pentingnya dengan kejayaan laman web anda sebagai
