CSS 의사 클래스를 사용하여 마우스 오버 버튼 애니메이션 효과 얻기-CSS 튜토리얼-php.cn

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

青灯夜游

풀어 주다： 2021-01-29 16:39:38

앞으로

2559명이 탐색했습니다.

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 의사 클래스를 사용하여 마우스 오버 버튼 애니메이션 효과 얻기