按钮水波纹
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画效果示例</title>
<style>
.ripple-button {
position: relative;
overflow: hidden;
padding: 12px 24px;
background-color: #6200ee;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
outline: none;
}
.ripple-button::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 5px;
background: rgba(255, 255, 255, 0.5);
opacity: 0;
border-radius: 100%;
transform: scale(1, 1) translate(-50%, -50%);
transform-origin: 50% 50%;
}
.ripple-button:focus:not(:active)::after {
animation: ripple 1s ease-out;
}
@keyframes ripple {
0% {
transform: scale(0, 0);
opacity: 0.5;
}
20% {
transform: scale(25, 25);
opacity: 0.3;
}
100% {
opacity: 0;
transform: scale(40, 40);
}
}
</style>
</head>
<body>
<button class="ripple-button">点击我</button>
</body>
<script>
</script>
</html>
.ripple-button:focus:not(:active)::after {
animation: ripple 1s ease-out;
}
这段CSS代码的作用是：当按钮获得焦点（如通过Tab键导航或点击）但不处于激活状态（未被按下）时，对其伪元素 ::after 应用水波纹动画效果。
详细解释：
- .ripple-button:focus
选择器匹配获得焦点的按钮（例如通过键盘Tab键聚焦或鼠标点击后）。
- :not(:active)
排除按钮处于激活（按下）状态的情况。这样水波纹动画只会在按钮被聚焦但未被按下时触发。
- ::after
针对按钮的伪元素应用样式，这个伪元素将作为水波纹的视觉元素。
- animation: ripple 1s ease-out
应用名为 ripple 的关键帧动画，持续1秒，使用 ease-out 缓动函数（动画开始时快，结束时慢）。