中心点波纹渐变散开
HTML css+js 特效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>中心点波纹渐变散开</title>
<style>
#wave-container {
position: relative;
width: 280px;
height: 280px;
overflow: hidden;
border-radius: 140px;
}
.wave {
position: absolute;
width: 100%;
height: 100%;
background-image: radial-gradient(circle, #0099ff, transparent);
animation: wave-animation 8s infinite;
border-radius:50%;
z-index: -10;
}
@keyframes wave-animation {
0% {
transform: scale(1);
opacity: 0;
}
50% {
transform: scale(1.5);
opacity: 1;
}
100% {
transform: scale(0);
opacity: 0;
}
}
</style>
</head>
<body>
<div id="wave-container">
<div class="wave"></div>
</div>
<script>
function createWave(container) {
const wave = document.createElement('div');
wave.classList.add('wave');
container.appendChild(wave);
setTimeout(() => {
wave.remove();
}, 2500);
}
const waveContainer = document.getElementById('wave-container');
createWave(waveContainer);
</script>
</body>
</html>