炫酷CSS霓虹动画以及其他动画特效
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>炫酷CSS动画特效</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
neon: {
pink: '#ff2a6d',
blue: '#05d9e8',
purple: '#d300c5',
yellow: '#fee800'
}
},
animation: {
'float': 'float 6s ease-in-out infinite',
'pulse-fast': 'pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'glow': 'glow 2s ease-in-out infinite alternate',
'explode': 'explode 1.5s ease-out forwards',
'flow': 'flow 8s linear infinite',
'spin-3d': 'spin-3d 15s linear infinite',
'bounce-custom': 'bounce-custom 2s ease-in-out infinite'
},
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-20px)' }
},
glow: {
'0%': { boxShadow: '0 0 5px rgba(255, 42, 109, 0.7), 0 0 10px rgba(255, 42, 109, 0.5)' },
'100%': { boxShadow: '0 0 10px rgba(5, 217, 232, 0.7), 0 0 20px rgba(5, 217, 232, 0.5), 0 0 30px rgba(5, 217, 232, 0.3)' }
},
explode: {
'0%': { transform: 'scale(0)', opacity: 1 },
'50%': { opacity: 1 },
'100%': { transform: 'scale(3)', opacity: 0 }
},
flow: {
'0%': { backgroundPosition: '0% 50%' },
'50%': { backgroundPosition: '100% 50%' },
'100%': { backgroundPosition: '0% 50%' }
},
'spin-3d': {
'0%': { transform: 'rotateY(0deg) rotateX(10deg)' },
'100%': { transform: 'rotateY(360deg) rotateX(10deg)' }
},
'bounce-custom': {
'0%, 100%': { transform: 'translateY(0) rotate(0deg)' },
'50%': { transform: 'translateY(-30px) rotate(5deg)' }
}
}
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-shadow-neon {
text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 20px currentColor;
}
.bg-gradient-animated {
background: linear-gradient(45deg, #ff2a6d, #05d9e8, #d300c5, #fee800);
background-size: 400% 400%;
}
.perspective-1000 {
perspective: 1000px;
}
.preserve-3d {
transform-style: preserve-3d;
}
.backface-hidden {
backface-visibility: hidden;
}
.rotate-y-180 {
transform: rotateY(180deg);
}
.particle {
position: absolute;
border-radius: 50%;
opacity: 0;
}
}
</style>
</head>
<body class="bg-gray-900 text-white min-h-screen p-4 md:p-8">
<div class="max-w-6xl mx-auto">
<h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-center mb-12 text-transparent bg-clip-text bg-gradient-animated animate-flow">
炫酷CSS动画特效
</h1>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- 1. 3D旋转立方体 -->
<div class="bg-gray-800 rounded-xl p-6 flex flex-col items-center justify-center h-80">
<h3 class="text-xl font-semibold mb-4 text-neon-blue">3D旋转立方体</h3>
<div class="perspective-1000 w-48 h-48">
<div class="w-full h-full preserve-3d animate-spin-3d relative">
<!-- 前 -->
<div class="absolute w-full h-full bg-neon-pink/70 rounded-md flex items-center justify-center backface-hidden border-2 border-white/20">
<i class="fa fa-star text-5xl"></i>
</div>
<!-- 后 -->
<div class="absolute w-full h-full bg-neon-blue/70 rounded-md flex items-center justify-center backface-hidden border-2 border-white/20 rotate-y-180">
<i class="fa fa-heart text-5xl"></i>
</div>
<!-- 左 -->
<div class="absolute w-full h-full bg-neon-purple/70 rounded-md flex items-center justify-center backface-hidden border-2 border-white/20" style="transform: rotateY(-90deg) translateZ(96px);">
<i class="fa fa-diamond text-5xl"></i>
</div>
<!-- 右 -->
<div class="absolute w-full h-full bg-neon-yellow/70 rounded-md flex items-center justify-center backface-hidden border-2 border-white/20" style="transform: rotateY(90deg) translateZ(96px);">
<i class="fa fa-bolt text-5xl"></i>
</div>
<!-- 上 -->
<div class="absolute w-full h-full bg-blue-500/70 rounded-md flex items-center justify-center backface-hidden border-2 border-white/20" style="transform: rotateX(90deg) translateZ(96px);">
<i class="fa fa-sun-o text-5xl"></i>
</div>
<!-- 下 -->
<div class="absolute w-full h-full bg-purple-500/70 rounded-md flex items-center justify-center backface-hidden border-2 border-white/20" style="transform: rotateX(-90deg) translateZ(96px);">
<i class="fa fa-moon-o text-5xl"></i>
</div>
</div>
</div>
</div>
<!-- 2. 霓虹按钮效果 -->
<div class="bg-gray-800 rounded-xl p-6 flex flex-col items-center justify-center h-80">
<h3 class="text-xl font-semibold mb-8 text-neon-pink">霓虹按钮效果</h3>
<div class="flex flex-col gap-4 w-full max-w-xs">
<button class="bg-transparent border-2 border-neon-pink text-neon-pink py-3 px-6 rounded-full font-bold tracking-wider transition-all duration-300 hover:bg-neon-pink/20 animate-glow">
粉色霓虹
</button>
<button class="bg-transparent border-2 border-neon-blue text-neon-blue py-3 px-6 rounded-full font-bold tracking-wider transition-all duration-300 hover:bg-neon-blue/20" style="animation: glow 2s ease-in-out infinite alternate-reverse;">
蓝色霓虹
</button>
<button class="bg-transparent border-2 border-neon-purple text-neon-purple py-3 px-6 rounded-full font-bold tracking-wider transition-all duration-300 hover:bg-neon-purple/20" style="animation: glow 1.5s ease-in-out infinite alternate;">
紫色霓虹
</button>
</div>
</div>
<!-- 3. 粒子爆炸效果 -->
<div class="bg-gray-800 rounded-xl p-6 flex flex-col items-center justify-center h-80 relative overflow-hidden">
<h3 class="text-xl font-semibold mb-4 text-neon-yellow">粒子爆炸效果</h3>
<button id="explodeBtn" class="bg-neon-yellow text-gray-900 py-2 px-6 rounded-full font-bold mb-6 hover:bg-neon-yellow/80 transition-colors">
点击爆炸
</button>
<div id="particleContainer" class="w-full h-full absolute top-0 left-0 pointer-events-none">
<!-- 粒子会通过CSS动态生成 -->
</div>
<div class="text-sm text-gray-400">点击按钮触发粒子爆炸动画</div>
</div>
<!-- 4. 流动渐变背景 -->
<div class="bg-gray-800 rounded-xl p-6 flex flex-col items-center justify-center h-80 overflow-hidden">
<h3 class="text-xl font-semibold mb-6 text-white">流动渐变背景</h3>
<div class="w-full h-48 rounded-lg bg-gradient-animated animate-flow flex items-center justify-center">
<div class="bg-gray-900/70 backdrop-blur-sm px-8 py-4 rounded-full">
<p class="text-center font-medium">动态渐变流动效果</p>
<p class="text-center text-sm text-gray-300">使用CSS背景渐变动画</p>
</div>
</div>
</div>
<!-- 5. 悬浮弹跳效果 -->
<div class="bg-gray-800 rounded-xl p-6 flex flex-col items-center justify-center h-80">
<h3 class="text-xl font-semibold mb-8 text-neon-blue">悬浮弹跳效果</h3>
<div class="flex gap-6">
<div class="w-16 h-16 bg-neon-pink rounded-full animate-float flex items-center justify-center">
<i class="fa fa-basketball-ball text-white text-2xl"></i>
</div>
<div class="w-16 h-16 bg-neon-blue rounded-full animate-float flex items-center justify-center" style="animation-delay: 0.5s;">
<i class="fa fa-baseball-ball text-white text-2xl"></i>
</div>
<div class="w-16 h-16 bg-neon-purple rounded-full animate-float flex items-center justify-center" style="animation-delay: 1s;">
<i class="fa fa-futbol text-white text-2xl"></i>
</div>
<div class="w-16 h-16 bg-neon-yellow rounded-full animate-float flex items-center justify-center" style="animation-delay: 1.5s;">
<i class="fa fa-golf-ball text-gray-900 text-2xl"></i>
</div>
</div>
</div>
<!-- 6. 文字霓虹效果 -->
<div class="bg-gray-800 rounded-xl p-6 flex flex-col items-center justify-center h-80">
<h3 class="text-xl font-semibold mb-8 text-neon-purple">文字霓虹效果</h3>
<div class="text-center">
<p class="text-4xl font-bold text-neon-pink text-shadow-neon mb-2">NEON</p>
<p class="text-3xl font-bold text-neon-blue text-shadow-neon mb-2">LIGHTS</p>
<p class="text-2xl font-bold text-neon-yellow text-shadow-neon">CSS EFFECTS</p>
</div>
</div>
</div>
</div>
<script>
// 粒子爆炸效果逻辑（仅用于生成粒子元素，动画仍由CSS控制）
document.getElementById('explodeBtn').addEventListener('click', function() {
const container = document.getElementById('particleContainer');
container.innerHTML = ''; // 清空现有粒子
const colors = ['#ff2a6d', '#05d9e8', '#d300c5', '#fee800', '#ffffff'];
const particleCount = 80;
// 创建粒子
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.classList.add('particle', 'animate-explode');
// 随机属性
const size = Math.random() * 8 + 2;
const color = colors[Math.floor(Math.random() * colors.length)];
const x = 50; // 中心点
const y = 50; // 中心点
const angle = Math.random() * Math.PI * 2; // 随机角度
const distance = Math.random() * 60 + 20; // 随机距离
// 计算最终位置
const endX = x + Math.cos(angle) * distance;
const endY = y + Math.sin(angle) * distance;
// 设置样式
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
particle.style.backgroundColor = color;
particle.style.left = `${x}%`;
particle.style.top = `${y}%`;
// 动画延迟，让爆炸更自然
particle.style.animationDelay = `${Math.random() * 0.3}s`;
// 设置爆炸方向（使用CSS变量传递给动画）
particle.style.setProperty('--end-x', `${endX}%`);
particle.style.setProperty('--end-y', `${endY}%`);
container.appendChild(particle);
}
});
</script>
<style>
/* 粒子爆炸动画补充样式 */
@keyframes explode {
0% {
transform: translate(0, 0) scale(0);
opacity: 1;
}
50% {
opacity: 1;
}
100% {
transform: translate(var(--end-x), var(--end-y)) scale(1);
opacity: 0;
}
}
</style>
</body>
</html>
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
18
0- 0
已为社区贡献1条内容
所有评论(0)