![javascript.gif]( "javascript.gif")
源码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML+CSS+JS 酷炫图形运动效果</title>
<style>
body, html {
height: 100%;
margin: 0;
overflow: hidden;
font-family: Arial, sans-serif;
background: #f0f0f0;
}
.content {
position: relative;
z-index: 1;
color: #333;
text-align: center;
padding-top: 20vh;
}
.shape {
position: absolute;
opacity: 0.2;
animation: float 20s infinite ease-in-out;
}
@keyframes float {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
25% { transform: translate(50px, 50px) rotate(90deg); }
50% { transform: translate(100px, 0) rotate(180deg); }
75% { transform: translate(50px, -50px) rotate(270deg); }
}
</style>
</head>
<body>
<div class="content">
<h1>Geometric Shapes</h1>
<p>Watch the shapes float around!</p>
</div>
<script>
const shapes = ['square', 'circle', 'triangle'];
const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#f7d794'];
function createShape() {
const shape = document.createElement('div');
shape.classList.add('shape');
const size = Math.random() * 100 + 50;
shape.style.width = `${size}px`;
shape.style.height = `${size}px`;
shape.style.left = `${Math.random() * 100}%`;
shape.style.top = `${Math.random() * 100}%`;
shape.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
shape.style.animationDuration = `${Math.random() * 10 + 10}s`;
shape.style.animationDelay = `${Math.random() * 5}s`;
const shapeType = shapes[Math.floor(Math.random() * shapes.length)];
if (shapeType === 'circle') {
shape.style.borderRadius = '50%';
} else if (shapeType === 'triangle') {
shape.style.width = '0';
shape.style.height = '0';
shape.style.borderLeft = `${size/2}px solid transparent`;
shape.style.borderRight = `${size/2}px solid transparent`;
shape.style.borderBottom = `${size}px solid ${shape.style.backgroundColor}`;
shape.style.backgroundColor = 'transparent';
}
document.body.appendChild(shape);
}
for (let i = 0; i < 20; i++) {
createShape();
}
</script>
</body>
</html>
