🎨 CSS 特效工坊 - 实验工坊

渐变旋转圆环

渐变旋转动画

动态渐变色 + 无限旋转，创造炫酷的光环效果。

.effect-1 {
background: linear-gradient(45deg, #ff6600, #ff0066);
animation: rotate 3s infinite;
}

跳动方块

弹性动画延迟

错落有致的跳动方块，通过 animation-delay 实现节奏感。

@keyframes bounce {
to { transform: translateY(-30px); }
}

3D 旋转立方体

3D transform

使用 transform-style: preserve-3d 实现立体旋转。

transform: rotateX(360deg) rotateY(360deg);

~ CSS ~

波浪文字

文字动画变形

文字上下波动，模拟波浪效果。

@keyframes wave {
50% { transform: translateY(-10px); }
}

霓虹灯边框

阴影发光

使用 box-shadow 实现霓虹灯呼吸效果。

box-shadow: 0 0 10px #ff6600, inset 0 0 10px #ff6600;

粒子效果

伪元素动画

使用 ::before/::after 创建粒子动画。

@keyframes particle {
to { transform: translate(50px, 50px); opacity: 0; }
}