几何图形缩放动画特效-优快云博客

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148693067

<!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;
padding: 0;
overflow: hidden;
background: #121212;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: Arial, sans-serif;
}

canvas {
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}

.content {
position: relative;
z-index: 2;
color: white;
text-align: center;
padding: 20px;
max-width: 600px;
}

h1 {
font-size: 3em;
margin-bottom: 20px;
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.btn {
display: inline-block;
padding: 12px 30px;
background: rgba(255,255,255,0.2);
color: white;
text-decoration: none;
border-radius: 30px;
font-size: 1.1em;
transition: all 0.3s ease;
border: 1px solid rgba(255,255,255,0.3);
cursor: pointer;
}

.btn:hover {
background: rgba(255,255,255,0.3);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* 插入的链接样式 */
.custom-link {
position: fixed;
bottom: 20px;
right: 20px;
color: rgba(255,255,255,0.7);
text-decoration: none;
font-size: 14px;
background: rgba(0,0,0,0.3);
padding: 8px 15px;
border-radius: 20px;
z-index: 10;
transition: all 0.3s ease;
}

.custom-link:hover {
color: white;
background: rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<canvas id="geoCanvas"></canvas>

<div class="content">
<h1>几何图形缩放动画</h1>
<button class="btn" id="changePattern">变换图案</button>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
const canvas = document.getElementById('geoCanvas');
const ctx = canvas.getContext('2d');
const changeBtn = document.getElementById('changePattern');

// 设置canvas尺寸为窗口大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 几何图形参数
let shapes = [];
let patternType = 1;
const colors = [
'#FF5252', '#FF4081', '#E040FB',
'#7C4DFF', '#536DFE', '#448AFF',
'#40C4FF', '#18FFFF', '#64FFDA',
'#69F0AE', '#B2FF59', '#EEFF41',
'#FFFF00', '#FFD740', '#FFAB40'
];

// 初始化图形
function initShapes() {
shapes = [];
const count = patternType === 1 ? 15 : patternType === 2 ? 30 : 45;

for (let i = 0; i < count; i++) {
shapes.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
size: Math.random() * 50 + 20,
color: colors[Math.floor(Math.random() * colors.length)],
speed: Math.random() * 0.02 + 0.01,
angle: Math.random() * Math.PI * 2,
rotation: Math.random() * 0.02 - 0.01,
sides: patternType === 1 ? Math.floor(Math.random() * 2) + 3 :
patternType === 2 ? Math.floor(Math.random() * 3) + 4 :
Math.floor(Math.random() * 4) + 5
});
}
}

// 绘制多边形
function drawPolygon(x, y, radius, sides, rotation) {
ctx.beginPath();
for (let i = 0; i < sides; i++) {
const angle = i * (Math.PI * 2 / sides) + rotation;
const px = x + Math.cos(angle) * radius;
const py = y + Math.sin(angle) * radius;
if (i === 0) {
ctx.moveTo(px, py);
} else {
ctx.lineTo(px, py);
}
}
ctx.closePath();
ctx.fill();
}

// 动画循环
function animate() {
requestAnimationFrame(animate);

// 清除画布
ctx.fillStyle = 'rgba(18, 18, 18, 0.1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 更新和绘制所有图形
shapes.forEach(shape => {
shape.angle += shape.speed;
shape.size = 30 + Math.sin(shape.angle) * 20;
shape.rotation += shape.rotation;

ctx.fillStyle = shape.color;
drawPolygon(shape.x, shape.y, shape.size, shape.sides, shape.rotation);
});
}

// 初始化并开始动画
initShapes();
animate();

// 点击按钮变换图案
changeBtn.addEventListener('click', function() {
patternType = patternType < 3 ? patternType + 1 : 1;
initShapes();
});

// 窗口大小改变时调整canvas尺寸
window.addEventListener('resize', function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
initShapes();
});
});
</script>
</body>
</html>