如何用CSS动画实现点击按钮圆圈波纹扩散特效
时间: 2024-12-14 10:15:54 浏览: 15
要使用CSS创建点击按钮的圆圈波纹扩散效果,你可以利用`radial-gradient`、`transition`和`:active`伪类。这里是一个简单的示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.button-container {
position: relative;
}
.button {
display: inline-block;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #ccc;
cursor: pointer;
transition: transform 0.3s ease-in-out;
}
.button:active {
transform: scale(1.1);
background-image: radial-gradient(circle at center, transparent 40%, #ccc 80%);
}
</style>
</head>
<body>
<div class="button-container">
<button class="button"></button>
</div>
</body>
</html>
```
在这个例子中:
1. `.button` 设置了初始样式,包括圆形边框、灰色背景和鼠标悬停效果。
2. 当按钮被点击(即处于`:active`状态)时,`transform: scale(1.1)`会使按钮放大一点,增加视觉反馈。
3. `background-image: radial-gradient(circle at center, transparent 40%, #ccc 80%)` 创建了一个从中心开始向外扩散的半透明到灰色渐变,模拟出波纹的效果。
阅读全文