Maison >interface Web >tutoriel CSS >Royaumes hivernaux enchantés - Un voyage à travers le solstice
Royaumes hivernaux enchantés - Un voyage à travers le solstice
- DDDoriginal
- 2024-12-27 13:52:15338parcourir
Ceci est une soumission pour Frontend Challenge - Édition de décembre, Glam Up My Markup: Winter Solstice
Remarque : Lors du développement de ce projet, j'ai remarqué que le thème du solstice d'hiver a également inspiré d'autres participants au défi. Cela montre à quel point la nature et la magie de cette saison peuvent être inspirantes. Mon inspiration vient de ma vision personnelle de l'hiver, en me concentrant sur les détails et l'interprétation de son charme. J'espère que ce projet contribuera à la diversité des idées dans ce défi.
Ce que j'ai construit
"Winter Solstice Magic" est une scène Web interactive conçue pour capturer l'essence et l'enchantement du solstice d'hiver. Le projet présente des éléments animés comme un soleil, une lune, des étoiles, des aurores boréales, des chutes de neige et des touches festives supplémentaires telles qu'un feu rougeoyant, des lumières scintillantes et des comètes filantes. L'objectif était de créer une expérience visuellement attrayante qui plonge le spectateur dans la magie de l'hiver tout en mettant en valeur la puissance des technologies Web modernes.
Démo
Vous pouvez découvrir le projet en direct ici : Winter Solstice Magic Demo
Le code complet est disponible. Il est ici :
<!DOCTYPE html>
<html lang="fr">
<tête>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scène du solstice d'hiver</title>
<style>
corps {
marge : 0 ;
débordement : caché ;
arrière-plan : dégradé linéaire (vers le bas, #003366, #000) ;
affichage : flexible ;
justifier-contenu : centre ;
aligner les éléments : centre ;
hauteur : 100vh ;
couleur : blanc ;
famille de polices : Arial, sans empattement ;
}
.ciel {
position : absolue ;
haut : 0 ;
gauche : 0 ;
largeur : 100 % ;
hauteur : 100 % ;
arrière-plan : dégradé linéaire (vers le haut, #1e3c72, #2a5298) ;
indice z : -1 ;
animation : skyTransition 20s alternative infinie ;
}
.soleil {
position : absolue ;
largeur : 80 px ;
hauteur : 80px ;
arrière-plan : dégradé radial (cercle, #ffcc00, #ff9900) ;
rayon de bordure : 50 % ;
animation : moveSun 8s infini ;
indice z : 1 ;
}
.lune {
position : absolue ;
largeur : 60 px ;
hauteur : 60px ;
arrière-plan : dégradé radial (cercle, #ffffff, #cccccc) ;
rayon de bordure : 50 % ;
animation : moveMoon 8s infini ;
indice z : 1 ;
opacité : 0,8 ;
}
.étoiles {
position : absolue ;
haut : 0 ;
gauche : 0 ;
largeur : 100 % ;
hauteur : 100 % ;
événements de pointeur : aucun ;
indice z : 0 ;
}
.étoile {
position : absolue ;
largeur : 3px ;
hauteur : 3px ;
fond : blanc ;
rayon de bordure : 50 % ;
opacité : 0 ;
animation : scintillement 3s infini ;
}
.aurore {
position : absolue ;
haut : 0 ;
gauche : 0 ;
largeur : 100 % ;
hauteur : 100 % ;
arrière-plan : dégradé radial (cercle, rgba (0, 255, 150, 0,3), transparent) ;
opacité : 0,4 ;
animation : auroraEffect 10s alternative infinie ;
indice z : -1 ;
}
.comète {
position : absolue ;
largeur : 10px ;
hauteur : 10px ;
arrière-plan : dégradé radial (cercle, #ffffff, transparent) ;
rayon de bordure : 50 % ;
ombre de la boîte : 0 0 10px 5px #ffffff ;
opacité : 0,8 ;
animation : flyComet 6s infini ;
}
.string-light {
position : absolue ;
bas : 10 % ;
largeur : 100 % ;
affichage : flexible ;
justifier-contenu : espacer uniformément ;
}.lumière {
largeur : 15px ;
hauteur : 15px ;
fond : rouge ;
rayon de bordure : 50 % ;
animation : alternative infinie de BlinkLight 2 s ;
}
.titre {
position : absolue ;
haut : 50 % ;
gauche : 50 % ;
transformer : traduire (-50 %, -50 %);
taille de police : 3,5rem ;
famille de polices : « Cinzel Decorative », cursive ;
couleur : #ffddcc ;
texte-ombre : 3px 3px 10px #000 ;
opacité : 0 ;
animation : fadeInOut 10s infini ;
}
.feu {
position : absolue ;
bas : 5 % ;
gauche : 50 % ;
transformer : traduireX(-50 %);
largeur : 50 px ;
hauteur : 100px ;
arrière-plan : dégradé radial (cercle, rgba (255, 165, 0, 1), rgba (255, 69, 0, 0,7) );
rayon de bordure : 50 % ;
animation : scintillement 0,5 s infini ;
}
@keyframes scintillent {
0 %, 100 % {
transformation : échelle(1);
opacité : 0,8 ;
}
50% {
transformation : échelle (1.2);
opacité : 1 ;
}
}
.arbre {
position : absolue ;
bas : 10 % ;
gauche : calc(10% var(--position, 0%));
largeur : 40 px ;
hauteur : 60px ;
arrière-plan : dégradé linéaire (vers le bas, #228B22, #006400) ;
chemin de détourage : polygone (50 % 0 %, 0 % 100 %, 100 % 100 %) ;
}
@keyframes fadeInOut {
0 %, 100 % {
opacité : 0 ;
}
50% {
opacité : 1 ;
}
}
@keyframes moveSun {
0% {
haut : 80 % ;
gauche : 10 % ;
}
50% {
haut : 20 % ;
gauche : 50 % ;
}
100 % {
haut : 80 % ;
gauche : 90 % ;
}
}
@keyframes moveMoon {
0% {
haut : 20 % ;
gauche : 90 % ;
}
50% {
haut : 10 % ;
gauche : 50 % ;
}
100 % {
haut : 20 % ;
gauche : 10 % ;
}
}
@keyframes skyTransition {
0% {
arrière-plan : dégradé linéaire (vers le haut, #1e3c72, #2a5298) ;
}
50% {
arrière-plan : dégradé linéaire (vers le haut, #000428, #004e92) ;
}
100 % {
arrière-plan : dégradé linéaire (vers le haut, #2c3e50, #4ca1af) ;
}
}
@keyframes scintillent {
0 %, 100 % {
opacité : 0 ;
}
50% {
opacité : 1 ;
}
}
@keyframes auroraEffect {
0% {
transformer : translateX(-20px) scale(1.2);
}
100 % {
transformer : translateX(20px) scale(1.5);
}}
@keyframes flyComet {
0% {
haut : -10 % ;
gauche : 110 % ;
}
100 % {
haut : 110 % ;
gauche : -10 % ;
}
}
@keyframes clignotantLight {
0% {
fond : rouge ;
}
100 % {
fond : jaune ;
}
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Cinzel Décoratif:wght@400;700&display=swap" rel="stylesheet">
≪/tête>
<corps>
<div>
<p>Ci-dessous, une image d'aperçu du projet :</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>
Voyage
</h2>
<p>Créer « la magie du solstice d'hiver » a été un processus passionnant et stimulant. Voici un aperçu de mon parcours :</p>
<h2>
L'idée
</h2>
<p>Je voulais donner vie à la beauté et au mystère du solstice d'hiver à travers une expérience Web immersive. Le projet a été inspiré par les éléments naturels de l'hiver et l'atmosphère paisible mais vibrante de la saison.</p>
<h2>
Technologies utilisées
</h2>
- HTML pour la structure de base.
- CSS pour les animations, les dégradés et le style.
- JavaScript pour une interactivité dynamique, y compris la génération de flocons de neige, d'étoiles et de comètes.
- Google Fonts pour améliorer l'attrait esthétique du texte du titre avec la police "Cinzel Decorative".
Principales fonctionnalités
Arrière-plan dynamique : Le ciel passe en douceur entre les dégradés pour imiter différents moments de la journée.
Éléments interactifs : Les étoiles scintillent, les flocons de neige tombent et les comètes traversent l'écran pour ajouter de la vie à la scène.
Détails festifs : Des lumières scintillantes et un feu rougeoyant rehaussent le charme saisonnier.
Accessibilité : Le projet a été conçu pour être visuellement attrayant et léger, garantissant qu'il fonctionne de manière transparente sur tous les appareils.
Défis et enseignements
L'un des défis consistait à optimiser les animations pour garantir des performances fluides sur différents appareils. J'ai beaucoup appris sur la gestion des performances d'animation à l'aide de CSS et JavaScript. Je suis particulièrement fier de l'intégration transparente de plusieurs éléments animés sans compromettre la réactivité de la page.
Quelle est la prochaine étape
À l'avenir, j'aimerais :
Ajoutez des éléments audio, tels qu'une subtile musique de fond ou des effets sonores sur le thème de l'hiver.
Introduisez l'interactivité de l'utilisateur, permettant aux spectateurs de personnaliser certains aspects de la scène.
Élargissez le projet en une série présentant différents thèmes saisonniers.
Licence
Le code de ce projet est sous licence MIT, ce qui le rend gratuit et ouvert à toute utilisation ou adaptation.
Remerciements
Un merci tout spécial à la Communauté DEV pour avoir organisé ce défi et fourni de l'inspiration via sa plateforme. Merci d'avoir pris en compte ma soumission ! J'espère que vous apprécierez "Magie du solstice d'hiver."
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!