css按钮点击动画效果
时间: 2023-09-08 14:08:12 浏览: 46
以下是一个简单的 CSS 按钮点击动画效果:
```html
<button class="btn">Click me</button>
```
```css
.btn {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #007bff;
border: none;
border-radius: 5px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 50%;
transition: width 0.3s ease, height 0.3s ease;
}
.btn:hover::before {
width: 300px;
height: 300px;
}
.btn:active::before {
width: 500px;
height: 500px;
transition: width 1s ease, height 1s ease;
}
```
在这个示例中,我们使用伪元素 `::before` 来创建一个圆形的背景,并将其位置设置在按钮的中心。然后,我们通过鼠标悬停和点击事件来改变这个圆形背景的大小和颜色。
当用户悬停在按钮上时,我们使用 `:hover` 伪类来缩放圆形背景。当用户点击按钮时,我们使用 `:active` 伪类来进一步放大圆形背景,并将过渡时间延长以产生更明显的动画效果。