<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标滚轮缩放特效</title>
<style>
body {
margin: 0;
overflow: hidden;
background: linear-gradient(135deg, #1a1a2e, #16213e);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: Arial, sans-serif;
color: white;
}
#container {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.shape {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.1s ease-out;
cursor: pointer;
}
.info {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
}
.info a {
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
}
.title {
position: absolute;
top: 20px;
width: 100%;
text-align: center;
font-size: 24px;
text-shadow: 0 0 10px rgba(0, 150, 255, 0.7);
}
</style>
</head>
<body>
<div id="container">
<div class="title">鼠标滚轮缩放特效</div>
<div class="shape" id="shape">
<svg width="200" height="200" viewBox="0 0 200 200">
<path d="M100 0 L150 50 L200 0 L200 50 L150 100 L200 150 L200 200 L150 150 L100 200 L50 150 L0 200 L0 150 L50 100 L0 50 L0 0 L50 50 Z"
fill="none" stroke="#4cc9f0" stroke-width="3"/>
</svg>
</div>
<div class="info">
</div>
</div>
<script>
const shape = document.getElementById('shape');
let scale = 1;
const minScale = 0.1;
const maxScale = 5;
const scaleStep = 0.05;
// 鼠标滚轮事件
window.addEventListener('wheel', function(e) {
e.preventDefault();
// 计算新的缩放比例
if (e.deltaY < 0) {
// 向上滚动 - 放大
scale = Math.min(scale + scaleStep, maxScale);
} else {
// 向下滚动 - 缩小
scale = Math.max(scale - scaleStep, minScale);
}
// 应用缩放变换
shape.style.transform = `translate(-50%, -50%) scale(${scale})`;
// 根据缩放级别改变颜色
const hue = (scale * 60) % 360;
shape.querySelector('path').setAttribute('stroke', `hsl(${hue}, 80%, 60%)`);
}, { passive: false });
// 鼠标移动时改变形状位置
document.addEventListener('mousemove', function(e) {
if (scale > 1.5) {
const moveX = (e.clientX - window.innerWidth / 2) * 0.02;
const moveY = (e.clientY - window.innerHeight / 2) * 0.02;
shape.style.transform = `translate(calc(-50% + ${moveX}px), calc(-50% + ${moveY}px)) scale(${scale})`;
}
});
// 双击重置缩放
shape.addEventListener('dblclick', function() {
scale = 1;
shape.style.transform = 'translate(-50%, -50%) scale(1)';
shape.querySelector('path').setAttribute('stroke', '#4cc9f0');
});
// 响应窗口大小变化
window.addEventListener('resize', function() {
if (scale > 1.5) {
shape.style.transform = 'translate(-50%, -50%) scale(${scale})';
}
});
// 添加动画效果
function animatePulse() {
const path = shape.querySelector('path');
let growing = true;
let currentWidth = 3;
setInterval(() => {
if (scale === 1) { // 只在原始大小时脉动
if (growing) {
currentWidth += 0.05;
if (currentWidth >= 4) growing = false;
} else {
currentWidth -= 0.05;
if (currentWidth <= 2) growing = true;
}
path.setAttribute('stroke-width', currentWidth);
}
}, 50);
}
animatePulse();
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
