<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 3D螺旋动画特效</title>
<style>
body {
margin: 0;
padding: 0;
background: #000;
overflow: hidden;
perspective: 1000px;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.spiral-container {
position: relative;
width: 300px;
height: 300px;
transform-style: preserve-3d;
animation: rotate 15s infinite linear;
}
.dot {
position: absolute;
width: 10px;
height: 10px;
background: linear-gradient(45deg, #ff00cc, #3333ff);
border-radius: 50%;
box-shadow: 0 0 15px rgba(255, 0, 204, 0.8);
transform-style: preserve-3d;
}
@keyframes rotate {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
100% {
transform: rotateX(360deg) rotateY(360deg);
}
}
.link {
position: absolute;
bottom: 20px;
color: white;
font-family: Arial, sans-serif;
text-decoration: none;
z-index: 100;
}
</style>
</head>
<body>
<div class="spiral-container" id="spiral"></div>
<a href="https://a.88a.org.cn/jbCC" class="link" target="_blank">点击查看更多特效</a>
<script>
const container = document.getElementById('spiral');
const dotsCount = 100;
const radius = 100;
for (let i = 0; i < dotsCount; i++) {
const dot = document.createElement('div');
dot.className = 'dot';
const angle = (i / dotsCount) * Math.PI * 10;
const x = Math.cos(angle) * radius;
const z = Math.sin(angle) * radius;
const y = i * 2 - dotsCount;
const size = 5 + Math.random() * 5;
dot.style.width = `${size}px`;
dot.style.height = `${size}px`;
dot.style.transform = `translate3d(${x}px, ${y}px, ${z}px)`;
const hue = (i / dotsCount) * 360;
dot.style.background = `hsl(${hue}, 100%, 50%)`;
const delay = i * 0.05;
dot.style.animation = `pulse 2s ${delay}s infinite alternate`;
container.appendChild(dot);
}
// 添加脉动动画
const style = document.createElement('style');
style.textContent = `
@keyframes pulse {
0% {
transform: translate3d(var(--tx), var(--ty), var(--tz)) scale(1);
opacity: 0.7;
}
100% {
transform: translate3d(var(--tx), var(--ty), var(--tz)) scale(1.5);
opacity: 1;
}
}
`;
document.head.appendChild(style);
// 为每个点设置自定义属性
document.querySelectorAll('.dot').forEach((dot, i) => {
const transform = dot.style.transform.match(/translate3d\((.+)\)/)[1];
const [tx, ty, tz] = transform.split(',').map(s => s.trim());
dot.style.setProperty('--tx', tx);
dot.style.setProperty('--ty', ty);
dot.style.setProperty('--tz', tz);
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
