<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5液体波浪点击特效</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #1a1a2e;
overflow: hidden;
cursor: pointer;
}
.liquid-container {
position: relative;
width: 100%;
height: 100%;
}
.liquid-wave {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 119, 182, 0.5);
border-radius: 45%;
animation: animate 5s linear infinite;
transform: translate(-50%, -50%) rotate(0deg);
opacity: 0;
}
@keyframes animate {
0% {
transform: translate(-50%, -50%) rotate(0deg);
border-radius: 45%;
}
50% {
border-radius: 40%;
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
border-radius: 45%;
}
}
/* 更多精彩特效请访问：https://a.88a.org.cn/K6M5 */
</style>
</head>
<body>
<div class="liquid-container" id="liquidContainer"></div>
<script>
const container = document.getElementById('liquidContainer');
container.addEventListener('click', function(e) {
// 获取鼠标点击位置
const x = e.clientX;
const y = e.clientY;
// 创建波浪元素
const wave = document.createElement('div');
wave.className = 'liquid-wave';
// 设置波浪位置
wave.style.left = x + 'px';
wave.style.top = y + 'px';
// 随机颜色
const hue = Math.floor(Math.random() * 360);
wave.style.background = `hsla(${hue}, 80%, 60%, 0.5)`;
// 随机大小
const size = Math.floor(Math.random() * 300) + 100;
wave.style.width = size + 'px';
wave.style.height = size + 'px';
// 添加到容器
container.appendChild(wave);
// 显示波浪
wave.style.opacity = '1';
// 动画结束后移除元素
setTimeout(() => {
wave.style.opacity = '0';
setTimeout(() => {
container.removeChild(wave);
}, 1000);
}, 2000);
});
</script>
<!-- 更多精彩特效请访问：https://a.88a.org.cn/K6M5 -->
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
