CSS 전용 애니메이션 영웅 섹션을 만드는 방법?

HTML 및 CSS 만 사용하는 애니메이션 영웅 영역을 만들고 먼저 제목, 설명 및 버튼으로 시맨틱 HTML 구조를 구축하십시오. 2. Flexbox 레이아웃을 사용하고 스타일의 영웅 영역에 구배 배경을 설정하십시오. 3. @keyframes를 사용하여 타이틀, 설명 및 버튼에 지연된 페이드 인 슬라이더 애니메이션을 추가하십시오. 4. 전환 및 호버 상태를 통해 CTA 버튼의 대화식 영상을 향상시킵니다. 5. 선택적으로 배경 크기 및 애니메이션을 사용하여 배경 기울기 흐름 효과를 달성합니다. 6. 모바일 장치에 반응 형 디스플레이를 보장하기 위해 미디어 쿼리를 추가하십시오. 마지막으로 애니메이션을 간소화하고 감소 된 모션 미디어 쿼리를 선호하여 성능과 접근성을 보장하여 교차 부호와 호환성, 교차 부전 친화적이며 시각적으로 매력적인 영웅 영역을 완성하여 전체 문장으로 끝납니다.

CSS 전용 애니메이션 영웅 섹션을 만드는 것은 JavaScript에 의존하지 않고 시각적 호소력을 더할 수있는 좋은 방법입니다. 다음은 HTML 및 CSS 만 사용하여 텍스트, 배경 및 호출 요소를위한 부드러운 애니메이션을 사용하여 하나를 구축하는 방법입니다.

1. HTML 마크 업 구조

영웅 섹션을위한 깨끗하고 시맨틱 한 HTML 구조로 시작하십시오. 컨테이너, 제목, 설명 및 버튼을 포함하십시오.

 <섹션 클래스 = "영웅">
  <div class = "Hero-Content">
    <h1 class = "Hero-Title"> 우리 플랫폼에 오신 것을 환영합니다 </h1>
    <p class = "영웅 설명">
      깨끗하고 현대적인 디자인과 강력한 애니메이션으로 놀라운 경험을 구축하십시오.
    </p>
    <a href = "#"class = "cta-button"> 시작하기 </a>
  </div>
</섹션>

2. CSS와 함께 영웅 섹션 스타일

Flexbox 또는 그리드를 사용하여 기본 레이아웃을 설정하고 배경 스타일을 정의하십시오. 미묘한 그라디언트 또는 이미지를 배경으로 사용하십시오.

 .영웅 {
  높이 : 100VH;
  배경 : 선형 등급 (135deg, #1E3C72, #2A5298);
  디스플레이 : Flex;
  정렬 구조 : 센터;
  정당화 컨텐츠 : 센터;
  텍스트 정렬 : 센터;
  색상 : 흰색;
  오버플로 : 숨겨진;
  위치 : 상대;
}

3. 입구 애니메이션 추가

CSS @keyframes 사용하여 나타나는 요소가 나타납니다. 부드러운 페이드 인 및 슬라이드 업 효과를 위해 opacity 적용하고 transform .

 .hero-title,
.Hero-description,
.cta-button {
  불투명도 : 0;
  변환 : Translatey (20px);
  애니메이션 : FadeInup 1s는 앞으로 나아갑니다.
}

.Hero-Title {
  애니메이션 지연 : 0.3S;
}

.Hero-description {
  애니메이션-지연 : 0.6S;
}

.cta-button {
  애니메이션-지연 : 0.9S;
  마진-탑 : 20px;
  디스플레이 : 인라인 블록;
}

@keyframes fadeinup {
  에게 {
    불투명도 : 1;
    변환 : Translatey (0);
  }
}

4. CTA 버튼 스타일과 애니메이션

전환 또는 키 프레임 애니메이션을 사용하여 호버 효과로 버튼을 돋보이게하십시오.

 .cta-button {
  패딩 : 12px 30px;
  배경색 : #ff6b6b;
  색상 : 흰색;
  텍스트 결정 : 없음;
  Border-Radius : 50px;
  글꼴 중량 : 대담한;
  Box-Shadow : 0 4px 15px RGBA (255, 107, 107, 0.3);
  전환 : 모든 0.3 초의 용이성;
}

.cta-button : 호버 {
  변환 : Translatey (-3px);
  Box-Shadow : 0 6px 20px rgba (255, 107, 107, 0.4);
  배경색 : #FF5252;
}

5. (선택 사항) 배경 애니메이션 추가

플로팅 입자 나 그라데이션 교대와 같은 애니메이션 배경 요소로 영웅을 향상시킵니다.

예 : 애니메이션 그라디언트 배경

 .영웅 {
  배경 : 선형 등급 (135deg, #1E3C72, #2A5298);
  애니메이션 : Gradientshift 8s는 쉽게 무한합니다.
  배경 크기 : 200% 200%;
}

@keyframes gradientshift {
  0% {
    배경 위치 : 0% 50%;
  }
  50% {
    배경 위치 : 100% 50%;
  }
  100% {
    배경 위치 : 0% 50%;
  }
}

6. 응답을 보장하십시오

영웅이 모바일 장치에서 잘 보이도록 미디어 쿼리를 추가하십시오.

 @Media (max-width : 768px) {
  .Hero-Title {
    글꼴 크기 : 2REM;
  }
  .Hero-description {
    글꼴 크기 : 1REM;
    패딩 : 0 20px;
  }
  .cta-button {
    패딩 : 10px 20px;
    글꼴 크기 : 0.9rem;
  }
}

최종 노트

• 과도한 애니메이션을 피하십시오-사육 전환은 부드럽고 목적이 있습니다.
• 테스트 성능 : 너무 많은 애니메이션이 저가형 장치에서 지연 될 수 있습니다.
• 접근성을 위해 prefers-reduced-motion 사용하십시오.

 @Media (Prefers-Seeduced-Motion : Reduce) {
  * {
    애니메이션 기간 : 0.01ms! 중요;
    전환 기간 : 0.01ms! 중요;
  }
}

그게 다야. HTML과 CSS만으로도 빠르게로드하고 장치에서 작동하는 시각적으로 매력적인 애니메이션 영웅 섹션을 만들었습니다. 자바 스크립트가 필요하지 않습니다.

위 내용은 CSS 전용 애니메이션 영웅 섹션을 만드는 방법?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!