놀라운 CSS 애니메이션으로 웹 페이지 향상

소개

이 랩에서는 웹 페이지의 시각적 외관을 향상시키기 위해 다양한 CSS 개념과 기술을 탐구합니다. 실습을 통해 CSS 규칙을 생성하고 수정하는 방법, HTML 요소에 스타일을 적용하는 방법, 그리고 CSS 선택자 (selector) 를 사용하여 특정 요소를 타겟팅하는 방법을 배우게 됩니다. 이 랩을 마치면 시각적으로 매력적이고 반응형 웹 페이지를 만들기 위해 CSS 를 사용하는 방법에 대한 확실한 이해를 갖게 될 것입니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 92%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

호버 그림자 상자 애니메이션

index.html과 style.css는 이미 VM 에 제공되어 있습니다.

텍스트에 마우스를 올렸을 때 그림자 상자를 만들려면 다음 단계를 따르세요.

transform: perspective(1px)를 설정하여 요소에 3D 공간을 부여하고, Z 평면과 사용자 간의 거리에 영향을 미치며, translateZ(0)을 사용하여 3D 공간에서 z 축을 따라 p 요소를 재배치합니다.
box-shadow를 사용하여 상자를 투명하게 만듭니다.
transition-property 속성을 사용하여 box-shadow와 transform 모두에 대해 전환 (transition) 을 활성화합니다.
:hover, :active, :focus 의사 클래스 선택자 (pseudo-class selector) 를 사용하여 새로운 box-shadow와 transform: scale(1.2)를 적용하여 텍스트의 크기를 변경합니다.
p 요소에 hover-shadow-box-animation 클래스를 추가합니다.

다음은 HTML 코드입니다.

<p class="hover-shadow-box-animation">Box it!</p>

다음은 CSS 코드입니다.

.hover-shadow-box-animation {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  margin: 10px;
  transition:
    box-shadow 0.3s,
    transform 0.3s;
}

.hover-shadow-box-animation:hover,
.hover-shadow-box-animation:focus,
.hover-shadow-box-animation:active {
  box-shadow: 1px 10px 10px -10px rgba(0, 0, 24, 0.5);
  transform: scale(1.2);
}

오른쪽 하단의 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하세요. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

요약

축하합니다! 호버 그림자 상자 애니메이션 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 실력을 향상시킬 수 있습니다.