我来为你创建一个具有鼠标触碰流体效果的网页，这个设计将包含多个流体元素,当鼠标靠近时会产生动态的流体反应效果。
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">流体互动效果</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
color: #fff;
overflow-x: hidden;
min-height: 100vh;
position: relative;
}
/* 流体容器 */
.fluid-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
/* 流体元素 */
.fluid {
position: absolute;
border-radius: 50%;
filter: blur(40px);
opacity: 0.7;
transition: all 0.3s ease-out;
pointer-events: none;
}
.fluid-1 {
width: 300px;
height: 300px;
background: radial-gradient(circle, #ff006e, #8338ec, #3a86ff);
top: 20%;
left: 10%;
animation: float 20s infinite ease-in-out;
}
.fluid-2 {
width: 400px;
height: 400px;
background: radial-gradient(circle, #06ffa5, #00d9ff, #ff006e);
top: 50%;
right: 15%;
animation: float 25s infinite ease-in-out reverse;
}
.fluid-3 {
width: 250px;
height: 250px;
background: radial-gradient(circle, #ffbe0b, #fb5607, #ff006e);
bottom: 20%;
left: 30%;
animation: float 30s infinite ease-in-out;
}
.fluid-4 {
width: 350px;
height: 350px;
background: radial-gradient(circle, #c77dff, #7209b7, #560bad);
top: 30%;
left: 50%;
animation: float 22s infinite ease-in-out reverse;
}
/* 浮动动画 */
@keyframes float {
0%, 100% {
transform: translate(0, 0) scale(1);
}
25% {
transform: translate(30px, -30px) scale(1.1);
}
50% {
transform: translate(-20px, 20px) scale(0.9);
}
75% {
transform: translate(40px, 10px) scale(1.05);
}
}
/* 鼠标交互效果 */
.fluid.interacting {
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.fluid.attract {
transform: scale(1.5);
opacity: 0.9;
}
.fluid.repel {
transform: scale(0.8);
opacity: 0.5;
}
/* 主内容区域 */
.content {
position: relative;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 20px;
text-align: center;
}
h1 {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 1rem;
background: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: glow 3s ease-in-out infinite alternate;
}
@keyframes glow {
from {
filter: drop-shadow(0 0 20px rgba(255, 0, 110, 0.5));
}
to {
filter: drop-shadow(0 0 30px rgba(131, 56, 236, 0.8));
}
}
.subtitle {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 3rem;
}
/* 控制面板 */
.controls {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 2rem;
border: 1px solid rgba(255, 255, 255, 0.2);
max-width: 600px;
width: 100%;
}
.control-group {
margin-bottom: 1.5rem;
}
.control-group:last-child {
margin-bottom: 0;
}
label {
display: block;
margin-bottom: 0.5rem;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.9);
}
.button-group {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
button {
background: linear-gradient(45deg, #ff006e, #8338ec);
color: white;
border: none;
padding: 0.8rem 1.5rem;
border-radius: 30px;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
flex: 1;
min-width: 120px;
}
button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(255, 0, 110, 0.3);
}
button:active {
transform: translateY(0);
}
button.active {
background: linear-gradient(45deg, #3a86ff, #06ffa5);
}
/* 粒子效果 */
.particle {
position: absolute;
width: 4px;
height: 4px;
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
pointer-events: none;
animation: particle-float 3s ease-out forwards;
}
@keyframes particle-float {
0% {
opacity: 1;
transform: translate(0, 0) scale(1);
}
100% {
opacity: 0;
transform: translate(var(--tx), var(--ty)) scale(0);
}
}
/* 响应式设计 */
@media (max-width: 768px) {
h1 {
font-size: 2.5rem;
}
.fluid-1, .fluid-2, .fluid-3, .fluid-4 {
width: 200px;
height: 200px;
}
.controls {
padding: 1.5rem;
}
}
</style>
</head>
<body>
<!-- 流体容器 -->
<div class="fluid-container">
<div class="fluid fluid-1" data-type="attract"></div>
<div class="fluid fluid-2" data-type="repel"></div>
<div class="fluid fluid-3" data-type="attract"></div>
<div class="fluid fluid-4" data-type="repel"></div>
</div>
<!-- 主内容 -->
<main class="content">
<h1>流体互动体验</h1>
<p class="subtitle">移动鼠标，感受流体的魅力</p>
<div class="controls">
<div class="control-group">
<label>交互模式</label>
<div class="button-group">
<button id="attractMode" class="active">吸引模式</button>
<button id="repelMode">排斥模式</button>
<button id="mixMode">混合模式</button>
</div>
</div>
<div class="control-group">
<label>特效控制</label>
<div class="button-group">
<button id="toggleParticles">粒子效果</button>
<button id="resetFluids">重置位置</button>
</div>
</div>
</div>
</main>
<script>
// 获取元素
const fluids = document.querySelectorAll('.fluid');
const attractModeBtn = document.getElementById('attractMode');
const repelModeBtn = document.getElementById('repelMode');
const mixModeBtn = document.getElementById('mixMode');
const toggleParticlesBtn = document.getElementById('toggleParticles');
const resetFluidsBtn = document.getElementById('resetFluids');
let currentMode = 'attract';
let particlesEnabled = true;
let mouseX = 0;
let mouseY = 0;
// 鼠标移动事件
document.addEventListener('mousemove', (e) => {
mouseX = e.clientX;
mouseY = e.clientY;
fluids.forEach(fluid => {
const rect = fluid.getBoundingClientRect();
const fluidX = rect.left + rect.width / 2;
const fluidY = rect.top + rect.height / 2;
const distance = Math.sqrt(
Math.pow(mouseX - fluidX, 2) +
Math.pow(mouseY - fluidY, 2)
);
// 根据距离和模式应用效果
if (distance < 200) {
fluid.classList.add('interacting');
if (currentMode === 'attract' ||
(currentMode === 'mix' && fluid.dataset.type === 'attract')) {
// 吸引效果
const angle = Math.atan2(fluidY - mouseY, fluidX - mouseX);
const force = (200 - distance) / 200;
const moveX = Math.cos(angle) * force * 50;
const moveY = Math.sin(angle) * force * 50;
fluid.style.transform = `translate(${moveX}px, ${moveY}px) scale(${1 + force * 0.5})`;
fluid.classList.add('attract');
fluid.classList.remove('repel');
} else if (currentMode === 'repel' ||
(currentMode === 'mix' && fluid.dataset.type === 'repel')) {
// 排斥效果
const angle = Math.atan2(mouseY - fluidY, mouseX - fluidX);
const force = (200 - distance) / 200;
const moveX = Math.cos(angle) * force * 50;
const moveY = Math.sin(angle) * force * 50;
fluid.style.transform = `translate(${moveX}px, ${moveY}px) scale(${1 - force * 0.3})`;
fluid.classList.add('repel');
fluid.classList.remove('attract');
}
} else {
fluid.classList.remove('interacting', 'attract', 'repel');
}
// 生成粒子效果
if (particlesEnabled && distance < 100 && Math.random() > 0.9) {
createParticle(fluidX, fluidY);
}
});
});
// 创建粒子
function createParticle(x, y) {
const particle = document.createElement('div');
particle.className = 'particle';
particle.style.left = x + 'px';
particle.style.top = y + 'px';
const angle = Math.random() * Math.PI * 2;
const velocity = Math.random() * 50 + 20;
particle.style.setProperty('--tx', Math.cos(angle) * velocity + 'px');
particle.style.setProperty('--ty', Math.sin(angle) * velocity + 'px');
document.body.appendChild(particle);
setTimeout(() => particle.remove(), 3000);
}
// 模式切换
attractModeBtn.addEventListener('click', () => {
currentMode = 'attract';
updateActiveButton(attractModeBtn);
});
repelModeBtn.addEventListener('click', () => {
currentMode = 'repel';
updateActiveButton(repelModeBtn);
});
mixModeBtn.addEventListener('click', () => {
currentMode = 'mix';
updateActiveButton(mixModeBtn);
});
function updateActiveButton(activeBtn) {
document.querySelectorAll('.button-group button').forEach(btn => {
btn.classList.remove('active');
});
activeBtn.classList.add('active');
}
// 粒子效果切换
toggleParticlesBtn.addEventListener('click', () => {
particlesEnabled = !particlesEnabled;
toggleParticlesBtn.textContent = particlesEnabled ? '粒子效果' : '粒子效果关闭';
toggleParticlesBtn.classList.toggle('active', particlesEnabled);
});
// 重置流体位置
resetFluidsBtn.addEventListener('click', () => {
fluids.forEach(fluid => {
fluid.style.transform = '';
fluid.classList.remove('interacting', 'attract', 'repel');
});
});
// 鼠标离开时重置
document.addEventListener('mouseleave', () => {
fluids.forEach(fluid => {
fluid.style.transform = '';
fluid.classList.remove('interacting', 'attract', 'repel');
});
});
</script>
</body>
</html>
这个网页实现了以下流体效果特性：
-
多种流体元素 - 四个不同颜色和大小的流体球体，具有自然的浮动动画
-
鼠标交互效果：
- 吸引模式：流体被鼠标吸引，靠近时放大并移动
- 排斥模式：流体被鼠标排斥，靠近时缩小并远离
- 混合模式：结合吸引和排斥效果
-
动态粒子效果 - 当鼠标靠近流体时，会产生漂浮的粒子效果
（图片来源网络，侵删） -
视觉增强：
- 使用模糊效果创建流体感
- 渐变色彩营造梦幻氛围
- 平滑的过渡动画
-
交互控制面板：
- 切换不同的交互模式
- 开关粒子效果
- 重置流体位置
整个设计采用了现代的玻璃态效果，配合深色背景和鲜艳的渐变色彩，创造出富有科技感的视觉体验，流体效果会根据鼠标位置实时响应,为用户提供沉浸式的互动体验。
