html涟漪动画特效
时间: 2023-11-29 08:47:20 浏览: 33
以下是一个简单的HTML涟漪动画特效的实现方法:
```html
<!DOCTYPE html>
<html>
<head>
<title>Ripple Effect</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #222;
}
#ripple {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
}
#ripple .circle {
position: absolute;
width: 0;
height: 0;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
transform: translate(-50%, -50%);
animation: ripple 1s linear infinite;
}
@keyframes ripple {
from {
width: 0;
height: 0;
opacity: 0.5;
}
to {
width: 500px;
height: 500px;
opacity: 0; }
}
</style>
</head>
<body>
<div id="ripple">
<div class="circle"></div>
</div>
<script>
const ripple = document.getElementById('ripple');
ripple.addEventListener('click', function(e) {
const circle = document.createElement('div');
circle.classList.add('circle');
circle.style.left = e.clientX + 'px';
circle.style.top = e.clientY + 'px';
ripple.appendChild(circle);
setTimeout(() => circle.remove(), 1000);
});
</script>
</body>
</html>
```