CSS 애니메이션으로 시각적으로 매력적인 웹사이트 만들기

소개

이 랩에서는 웹 페이지의 모양을 제어하기 위해 스타일시트를 생성하고 수정하는 방법을 배우면서 CSS 프로그래밍을 탐구합니다. 다양한 CSS 속성 및 선택자 (selector) 를 사용하여 시각적으로 매력적이고 반응형 디자인을 만드는 실습 경험을 얻게 됩니다. 랩이 끝나면 CSS 에 대한 탄탄한 이해를 갖게 되며, 전문적인 웹사이트를 만들기 위해 지식을 적용할 수 있게 됩니다.

버튼 스윙 애니메이션

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

포커스 시 스윙 애니메이션을 생성하려면, 요소의 변경 사항을 애니메이션화하기 위해 적절한 transition을 사용해야 합니다. 그런 다음, 요소에 :focus 의사 클래스 (pseudo-class) 를 적용하고 transform과 함께 animation을 사용하여 스윙하게 만듭니다. 마지막으로, 애니메이션을 한 번만 재생하도록 animation-iteration-count를 추가합니다. HTML 및 CSS 에서 이를 수행하는 방법의 예는 다음과 같습니다.

<button class="button-swing">Submit</button>

.button-swing {
  color: #65b5f6;
  background-color: transparent;
  border: 1px solid #65b5f6;
  border-radius: 4px;
  padding: 0 16px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.button-swing:focus {
  animation: swing 1s ease;
  animation-iteration-count: 1;
}

@keyframes swing {
  15% {
    transform: translateX(5px);
  }
  30% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(3px);
  }
  65% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(2px);
  }
  100% {
    transform: translateX(0);
  }
}

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

버튼 스윙 애니메이션

소개

버튼 스윙 애니메이션

요약