波纹扩散效果

2026/8/13 4:22:19 拓冰建站浏览量
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>波纹扩散</title><style>body {display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background: rgba(32, 33, 47, 0.9);}.circle-container {position: relative;width: 300px;height: 300px;border-radius: 50%;/* overflow: hidden; */}.circle {width: 100%;height: 100%;object-fit: cover;border-radius: 50%;animation: rotate 6s linear infinite;}.circle-container > span {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;border-radius: 50%;border: 2px solid #00bfff; /* 设置边框颜色为蓝色 */z-index: -1;animation: ripple 2s linear infinite;}@keyframes rotate {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}@keyframes ripple {0% {transform: scale(1);opacity: 1;}100% {transform: scale(1.5);opacity: 0;}}</style></head><body><div class="circle-container"><img class="circle" src="../assets/img/童话.jpg" alt="Circle Image" /><span class="ripple"></span><span class="ripple"></span><span class="ripple"></span></div></body><script>const allRippleDom = document.querySelectorAll(".ripple");if (allRippleDom) {allRippleDom.forEach((item, index) => {item.style.animation = `ripple ${index + 1.5}s linear infinite`;});}</script>
</html>
在这里插入图片描述
建站实战干货

波纹扩散效果
