CSS 로 매력적인 버튼 채우기 애니메이션 만들기

소개

이 랩에서는 CSS 를 사용하여 버튼에 호버 시 채우기 애니메이션을 만드는 방법을 배웁니다. :hover 의사 클래스를 사용하여 사용자가 버튼 위로 마우스를 가져갈 때 버튼의 background (배경) 및 color (색상) 를 변경하고, 변경 사항을 애니메이션화하기 위해 transition 효과를 추가합니다. 이 랩이 끝나면 버튼에 매력적인 호버 효과를 추가하여 웹사이트의 사용자 경험을 향상시킬 수 있습니다.

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

버튼 채우기 애니메이션

index.html 및 style.css는 이미 VM 에 제공되었습니다.

호버 시 채우기 애니메이션을 만들려면 color (색상) 및 background (배경) 속성을 설정하고 적절한 transition (전환) 을 적용하여 변경 사항을 애니메이션화할 수 있습니다. 호버 시 애니메이션을 트리거하려면 :hover 의사 클래스를 사용하여 요소의 background (배경) 및 color (색상) 속성을 변경합니다. 다음은 코드 스니펫 예시입니다.

<button class="animated-fill-button">Submit</button>

.animated-fill-button {
  padding: 20px;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  cursor: pointer;
  transition: 0.3s all ease-in-out;
}

.animated-fill-button:hover {
  background: #000;
  color: #fff;
}

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

요약

축하합니다! 버튼 채우기 애니메이션 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.