CSS3 实现按钮点击水波纹动画
点击按钮出现圆形水波水纹效果的css<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.button-container {
position: relative;
width: 200px;
height: auto;
margin: 100px auto 0;
}
.hand {
position: absolute;
width: 40px;
right: 0;
top: 50%;
transform: translateY(-50%);
animation: spin 1s linear infinite;
}
.button {
width: 100%;
height: 50px;
background-color: #1f8be7;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
overflow: hidden;
}
.button::after {
content: '';
position: absolute;
width: 30px;
height: 30px;
border: 1px solid rgba(251, 252, 255, 0.38);
border-radius: 50%;
top: 60%;
left: 160px;
transform: translate(-50%, -50%) scale(0);
animation: ripple 1s linear infinite;
}
.button::before {
content: '';
position: absolute;
width: 10px;
height: 10px;
border: 1px solid #fbfcff;
border-radius: 50%;
background: transparent;
top: 60%;
left: 160px;
transform: translate(-50%, -50%) scale(0);
animation: ripple 1s linear 0.5s infinite;
}
@keyframes ripple {
0% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(2);
opacity: 0.1;
}
}
@keyframes spin {
0%, 100% {
transform: translateY(-50%) scale(1);
}
50% {
transform: translateY(-50%) scale(0.9);
}
}
</style>
</head>
<body>
<div class="button-container">
<img src="./hand.png" alt="hand" class="hand">
<button class="button" id="button">按钮</button>
</div>
</body>
</html>
