CSS3 애니메이션을 기반으로 한 마우스 오버 버튼 특수 효과의 자세한 예

　간단한 튜토리얼

　CSS3 애니메이션을 이용하여 만든 마우스오버 버튼 애니메이션 특수효과 세트입니다. 이 마우스 오버 버튼 애니메이션 세트에는 13개의 최종 효과가 있으며, 모두 버튼과 CSS3 애니메이션의 의사 요소로 생성됩니다.

데모 보기 　사용 방법

　HTML 구조

　효과는 하이퍼링크를 사용하여 버튼을 만듭니다. 예를 들어 HTML 코드입니다. 첫 번째 스와이프 효과는 다음과 같습니다.

<a class="btn-0" href="#">Swipe</a>

CSS 스타일

편의상 특수 효과는 , , < ;b>, 를 제외한 모든 요소입니다. 및 에는 애니메이션 전환이 추가되었습니다.

html *,
html *:before,
html *:after {
  box-sizing: border-box;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
html i, html em,
html b, html strong,
html span {
  -webkit-transition: none;
  transition: none;
}

　 그런 다음 버튼에 대한 공통 스타일을 설정합니다.

a {
  text-decoration: none;
  line-height: 80px;
  color: black;
}
[class^="btn-"] {
  position: relative;
  display: block;
  margin: 20px auto;
  width: 100%;
  height: 80px;
  max-width: 250px;
  text-transform: uppercase;
  overflow: hidden;
  border: 1px solid currentColor;
}

첫 번째 데모에서는 버튼의 :before 의사 요소를 사용하여 진한 보라색 슬라이더를 만듭니다. 슬라이더는 절대적으로 위치하며 버튼 왼쪽에 위치합니다. 처음에는 너비가 0입니다. 마우스가 버튼 위로 이동하면 버튼의 글꼴 색상이 흰색으로 전환되고 :before 의사 요소의 너비가 변경됩니다. 변화량이 0이면 100%입니다.

.btn-0 {
  color: #9a3789;
}
.btn-0:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 80px;
  background: #520c46;
}

사용자가 버튼을 클릭하면 버튼의 배경색을 밝은 보라색으로 변경합니다.

.btn-0:hover {
  color: #e1c4dc;
}
.btn-0:hover:before {
  width: 250px;
}

위 내용은 CSS3 애니메이션을 기반으로 한 마우스 오버 버튼 특수 효과의 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!