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>

분석:

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>

분석:

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