버튼은 개발자에게 매우 일반적인 기능입니다. 프런트 엔드는 일반적으로 사용자 경험을 높이기 위해 버튼에 일부 작업 상호 작용 스타일을 추가합니다.
예: 호버 스타일, 클릭 스타일, 로딩 스타일 등 간단한 예제를 통해 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: ''; 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!