마법에 걸린 겨울 왕국 - 지점을 통과하는 여행-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

마법에 걸린 겨울 왕국 - 지점을 통과하는 여행

DDD

Dec 27, 2024 pm 01:52 PM

프런트엔드 챌린지 - 12월 에디션, Glam Up My Markup: Winter Solstice

에 대한 제출물입니다.

참고: 이 프로젝트를 개발하는 동안 동지라는 주제가 다른 챌린지 참가자들에게도 영감을 주었다는 것을 알게 되었습니다. 이는 이번 시즌의 자연과 마법이 얼마나 영감을 주는지 강조합니다. 나의 영감은 겨울의 매력에 대한 세부 사항과 해석에 초점을 맞춘 개인적인 비전에서 비롯됩니다. 이번 프로젝트가 이번 챌린지에서 다양한 아이디어를 내는데 기여하길 바랍니다.

내가 만든 것

"Winter Solstice Magic"은 동지의 본질과 매력을 포착하기 위해 고안된 인터랙티브 웹 장면입니다. 이 프로젝트에는 태양, 달, 별, 북극광, 떨어지는 눈과 같은 애니메이션 요소와 빛나는 불, 반짝이는 불빛, 혜성 발사와 같은 추가 축제 요소가 포함되어 있습니다. 목표는 현대 웹 기술의 힘을 보여주면서 시청자를 겨울의 마법에 몰입시키는 시각적으로 매력적인 경험을 만드는 것이었습니다.

데모

여기에서 프로젝트를 실시간으로 경험할 수 있습니다: Winter Solstice Magic Demo

전체 코드는 여기에서 확인하실 수 있습니다:

<!DOCTYPE html>
<html lang="ko">
<머리>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>동지의 풍경</title>
    <스타일>
        몸 {
            여백: 0;
            오버플로: 숨김;
            배경: 선형 그라데이션(아래로, #003366, #000);
            디스플레이: 플렉스;
            내용 정당화: 센터;
            항목 정렬: 중앙;
            높이: 100vh;
            색상: 흰색;
            글꼴 모음: Arial, sans-serif;
        }

        .하늘 {
            위치: 절대;
            상단: 0;
            왼쪽: 0;
            너비: 100%;
            높이: 100%;
            배경: 선형 그라데이션(위로, #1e3c72, #2a5298);
            Z-색인: -1;
            애니메이션: skyTransition 20s 무한 대체;
        }

        .해 {
            위치: 절대;
            너비: 80px;
            높이: 80px;
            배경: 방사형 그라데이션(원, #ffcc00, #ff9900);
            테두리 반경: 50%;
            애니메이션: moveSun 8s 무한;
            Z-색인: 1;
        }

        .달 {
            위치: 절대;
            너비: 60px;
            높이: 60px;
            배경: 방사형 그라데이션(원, #ffffff, #cccccc);
            테두리 반경: 50%;
            애니메이션: moveMoon 8s 무한;
            Z-색인: 1;
            불투명도: 0.8;
        }

        .별 {
            위치: 절대;
            상단: 0;
            왼쪽: 0;
            너비: 100%;
            높이: 100%;
            포인터 이벤트: 없음;
            Z-인덱스: 0;
        }

        .별 {
            위치: 절대;
            너비: 3px;
            높이: 3px;
            배경: 흰색;
            테두리 반경: 50%;
            불투명도: 0;
            애니메이션: 반짝임 3s 무한;
        }

        .오로라 {
            위치: 절대;
            상단: 0;
            왼쪽: 0;
            너비: 100%;
            높이: 100%;
            배경: 방사형 그라데이션(원, rgba(0, 255, 150, 0.3), 투명);
            불투명도: 0.4;
            애니메이션: auroraEffect 10s 무한 대체;
            Z-색인: -1;
        }

        .혜성 {
            위치: 절대;
            너비: 10px;
            높이: 10px;
            배경: 방사형 그라데이션(원, #ffffff, 투명);
            테두리 반경: 50%;
            상자 그림자: 0 0 10px 5px #ffffff;
            불투명도: 0.8;
            애니메이션: flyComet 6s 무한;
        }

        .light-string {
            위치: 절대;
            하단: 10%;
            너비: 100%;
            디스플레이: 플렉스;
            justify-content: 공간 균등하게;
        }.빛 {
            너비: 15px;
            높이: 15px;
            배경: 빨간색;
            테두리 반경: 50%;
            애니메이션: 깜박임 2s 무한 대체;
        }

        .제목 {
            위치: 절대;
            최고: 50%;
            왼쪽: 50%;
            변환: 변환(-50%, -50%);
            글꼴 크기: 3.5rem;
            글꼴 모음: 'Cinzel 장식', 필기체;
            색상: #ffddcc;
            텍스트 그림자: 3px 3px 10px #000;
            불투명도: 0;
            애니메이션: fadeInOut 10초 무한;
        }

        .불 {
            위치: 절대;
            하단: 5%;
            왼쪽: 50%;
            변환: 번역X(-50%);
            너비: 50px;
            높이: 100px;
            배경: 방사형 그라데이션(원, rgba(255, 165, 0, 1), rgba(255, 69, 0, 0.7));
            테두리 반경: 50%;
            애니메이션: 깜박임 0.5초 무한;
        }

        @keyframes 깜박임 {
            0%, 100% {
                변환: scale(1);
                불투명도: 0.8;
            }
            50% {
                변환: scale(1.2);
                불투명도: 1;
            }
        }

        .나무 {
            위치: 절대;
            하단: 10%;
            왼쪽: calc(10% var(--position, 0%));
            너비: 40px;
            높이: 60px;
            배경: 선형 그라데이션(아래로, #228B22, #006400);
            클립 경로: 다각형(50% 0%, 0% 100%, 100% 100%);
        }

        @keyframes fadeInOut {
            0%, 100% {
                불투명도: 0;
            }
            50% {
                불투명도: 1;
            }
        }

        @keyframes moveSun {
            0% {
                상단: 80%;
                왼쪽: 10%;
            }
            50% {
                최고: 20%;
                왼쪽: 50%;
            }
            100% {
                상단: 80%;
                왼쪽: 90%;
            }
        }

        @keyframes moveMoon {
            0% {
                최고: 20%;
                왼쪽: 90%;
            }
            50% {
                최고: 10%;
                왼쪽: 50%;
            }
            100% {
                최고: 20%;
                왼쪽: 10%;
            }
        }

        @keyframes skyTransition {
            0% {
                배경: 선형 그라데이션(위로, #1e3c72, #2a5298);
            }
            50% {
                배경: 선형 그라데이션(맨 위로, #000428, #004e92);
            }
            100% {
                배경: 선형 그라데이션(위로, #2c3e50, #4ca1af);
            }
        }

        @keyframes 반짝임 {
            0%, 100% {
                불투명도: 0;
            }
            50% {
                불투명도: 1;
            }
        }

        @keyframes auroraEffect {
            0% {
                변환: 번역X(-20px) 스케일(1.2);
            }
            100% {
                변환: 번역X(20px) 스케일(1.5);
            }}

        @keyframes flyComet {
            0% {
                최고: -10%;
                왼쪽: 110%;
            }
            100% {
                상단: 110%;
                왼쪽: -10%;
            }
        }

        @keyframes 깜박임 {
            0% {
                배경: 빨간색;
            }
            100% {
                배경: 노란색;
            }
        }

    </스타일>
    <link href="https://fonts.googleapis.com/css2?family=Cinzel 장식:wght@400;700&display=swap" rel="stylesheet">
</머리>
<본문>
    <div>



<p>아래는 프로젝트 미리보기 이미지입니다.</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>
  
  
  여행
</h2>

<p>'Winter Solstice Magic'을 만드는 것은 흥미롭고 도전적인 과정이었습니다. 내 여행 개요는 다음과 같습니다.</p>

<h2>
  
  
  아이디어
</h2>

<p>저는 몰입형 웹 경험을 통해 동지의 아름다움과 신비로움을 생생하게 전달하고 싶었습니다. 이 프로젝트는 겨울의 자연 요소와 계절의 평화로우면서도 활기찬 분위기에서 영감을 받았습니다.</p>

<h2>
  
  
  사용된 기술
</h2>

로그인 후 복사

기본 구조는 HTML입니다.
애니메이션, 그라디언트 및 스타일링을 위한 CSS.
눈송이, 별, 혜성의 생성을 포함한 동적 상호작용을 위한 JavaScript.
'Cinzel 장식' 글꼴을 사용하여 제목 텍스트의 미적 매력을 강화하는 Google 글꼴

주요 특징

동적 배경: 하늘은 하루 중 다양한 시간을 모방하기 위해 그라데이션 사이를 부드럽게 전환합니다.

인터랙티브 요소: 별이 반짝거리고, 눈송이가 내리고, 혜성이 화면을 가로질러 줄지어 나타나 장면에 생기를 더합니다.

축제 세부정보: 반짝이는 불빛과 타오르는 불이 계절의 매력을 더욱 돋보이게 합니다.

접근성: 이 프로젝트는 시각적으로 매력적이고 가벼우며 여러 기기에서 원활하게 작동하도록 설계되었습니다.

도전과 교훈

한 가지 과제는 다양한 기기에서 원활한 성능을 보장하기 위해 애니메이션을 최적화하는 것이었습니다. CSS와 JavaScript를 사용하여 애니메이션 성능을 관리하는 방법에 대해 많은 것을 배웠습니다. 페이지의 반응성을 저하시키지 않으면서 여러 애니메이션 요소를 원활하게 통합할 수 있다는 점이 특히 자랑스럽습니다.