中心点波纹渐变散开

小小优化师 anny

已于 2024-05-16 14:56:13 修改

阅读量414

点赞数 4

文章标签： css3 css javascript

于 2024-05-16 14:13:07 首次发布

本文链接：https://blog.csdn.net/q28000/article/details/138959618

版权

中心点波纹渐变散开

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>