매우 실용적입니다! CSS는 버튼을 클릭할 때 누르는 동적 효과를 구현합니다.
- 藏色散人원래의
- 2021-08-27 10:31:3911388검색
이전 글 "CSS로 3점 로딩 애니메이션을 빠르게 만드는 방법"에서 CSS를 활용하여 3점 로딩 애니메이션 효과를 만드는 방법을 소개해드렸는데요, 관심 있는 친구들은 읽어보시고 배워보세요~
이 기사에서는 이를 소개합니다. 프런트엔드 디자인 프로세스에서 매우 실용적인 동적 효과는 버튼을 클릭할 때 누르는 동적 효과를 표시하는 것입니다. 말로만 하면 그 효과가 무엇인지 이해하지 못할 수도 있습니다. at an animation:
하지만 이 글에서는 이런 종류의 누르기의 역동적인 효과를 소개할 뿐만 아니라 또 다른 효과도 소개할 것입니다. 계속 읽어보세요!
첫 번째 효과 구현 방법:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* 为按钮添加一些基本样式 */
.btn {
text-decoration: none;
border: none;
padding: 12px 40px;
font-size: 16px;
background-color: green;
color: #fff;
border-radius: 5px;
box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24);
cursor: pointer;
outline: none;
transition: 0.2s all;
}
/* 在按钮处于活动状态时添加转换 */
.btn:active {
transform: scale(0.98);
box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
}
</style>
</head>
<body>
<!-- 带有类'btn'的按钮 -->
<button class="btn">Button</button>
</body>
</html>효과는 다음과 같습니다.
참고:
transform 속성은 요소에 2D 또는 3D 변형을 적용합니다.
CSS 변환 속성을 사용하여 버튼이 활성화되었을 때 누름 효과를 추가하세요. CSS 변환 속성을 사용하면 요소의 크기 조정, 회전, 이동 및 기울일 수 있습니다.
두 번째 효과 구현 방법:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* 向按钮添加基本样式 */
.btn {
padding: 15px 40px;
font-size: 16px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #ff311f;
border: none;
border-radius: 5px;
box-shadow: box-shadow:
7px 6px 28px 1px rgba(0, 0, 0, 0.24);
}
/* “active”添加样式 */
.btn:active {
box-shadow: box-shadow:
7px 6px 28px 1px rgba(0, 0, 0, 0.24);
transform: translateY(4px);
}
</style>
</head>
<body>
<button class="btn">点击我</button>
</body>
</html>효과는 다음과 같습니다.
참고: 활성 의사 클래스가 활성화되면 버튼을 클릭할 때 다른 방법을 사용하여 자신만의 효과를 만들 수 있습니다.
PHP 중국어 웹사이트 플랫폼에는 많은 비디오 교육 리소스가 있습니다. "css 비디오 튜토리얼"을 배우는 모든 분들을 환영합니다!
위 내용은 매우 실용적입니다! CSS는 버튼을 클릭할 때 누르는 동적 효과를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.