CSS 의사 클래스를 사용하여 마우스 오버 버튼 애니메이션 효과 얻기

青灯夜游
풀어 주다: 2021-01-29 16:39:38
앞으로
2524명이 탐색했습니다.

CSS 의사 클래스를 사용하여 마우스 오버 버튼 애니메이션 효과 얻기

버튼은 개발자에게 매우 일반적인 기능입니다. 프런트 엔드는 일반적으로 사용자 경험을 높이기 위해 버튼에 일부 작업 상호 작용 스타일을 추가합니다.

예: 호버 스타일, 클릭 스타일, 로딩 스타일 등 간단한 예제를 통해 CSS3 애니메이션과 CSS 의사클래스에 대해 알아봅시다.

예제 1

<button class="btn-1">按钮一</button>

<style>
button{
  position: relative;
  width: 100px;
  height: 40px;
  border: 1px solid #46b0ff;
  background: none;
  cursor: pointer;
}
button:after{
  position: absolute;
  content: &#39;&#39;;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.btn-1:after{
  opacity: 0; 
  background: #46b0ff;
  transition: all .3s;
  z-index: -1;
}
.btn-1:hover:after{
  opacity: 1; 
}
</style>
로그인 후 복사

CSS 의사 클래스를 사용하여 마우스 오버 버튼 애니메이션 효과 얻기

분석:

1 여기에서는 상대 및 절대 위치 지정이 사용된 후 가상 클래스를 버튼의 배경으로 사용합니다.

기억하세요. 요소의 경우 상위 요소는 상대적으로 위치가 지정되어야 합니다. 그렇지 않으면 요소는 루트 노드까지 상대적으로 위치가 지정된 요소를 찾습니다.

2. 여기서는 :hover 이벤트 애니메이션을 설명하기 위해 전환을 사용합니다. 애니메이션은 0.3초 만에 완료되고 :after의 투명도가 변경됩니다. 모든 것은 모두 행동입니다.

물론, 여기에는 더 간단한 구현이 있습니다. 유형을 사용하지 않고 배경을 직접 변경해도 됩니다. 코드를 참조하세요.

<button class="btn-1">按钮一</button>

<style>
button{
  position: relative;
  width: 100px;
  height: 40px;
  border: 1px solid #46b0ff;
  background: none;
  cursor: pointer;
  background: rgba(70, 176, 255, 0);
  transition: all 1s;
}
.btn-1:hover{
  background: rgba(70, 176, 255, 1);
}
</style>
로그인 후 복사

ok 예제 1을 기반으로 한 단계 더 진행합니다. 예제 2

를 참조하세요.

예제 2

<button class="btn-2">按钮二</button>

<style>
...
/* 这里省略上方的公共样式 */
.btn-2:after{
  width: 0;
  background: #f13f84;
  transition: all .3s;
  z-index: -1;
}
.btn-2:hover:after{
  width: 100%;
}
</style>
로그인 후 복사

CSS 의사 클래스를 사용하여 마우스 오버 버튼 애니메이션 효과 얻기

분석:

1 이는 실제로 예 1과 유사하지만 여기서 의사 클래스의 너비가 변경되었습니다.

2. 비유하자면 의사 클래스의 높이를 변경하고 하향 확장 애니메이션을 볼 수 있습니다.

<button class="btn-3">按钮三</button>

<style>
...
/* 这里省略上方的公共样式 */
.btn-2:after{
  width: 0;
  background: #f13f84;
  transition: all .3s;
  z-index: -1;
}
.btn-2:hover:after{
  width: 100%;
}
</style>
로그인 후 복사

CSS 의사 클래스를 사용하여 마우스 오버 버튼 애니메이션 효과 얻기

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !

위 내용은 CSS 의사 클래스를 사용하여 마우스 오버 버튼 애니메이션 효과 얻기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:javanx.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿