CSS3 애니메이션을 기반으로 한 마우스 오버 버튼 특수 효과의 자세한 예-CSS 튜토리얼-php.cn

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

巴扎黑

풀어 주다： 2017-05-27 17:32:00

원래의

1616명이 탐색했습니다.

　간단한 튜토리얼

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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!