30个酷炫HTML+CSS特效源码
以下是精选的HTML+CSS趣味源码示例，涵盖动画、交互、3D特效等创意实现，附代码片段与实现原理：
1. 代码瀑布加载动画（纯CSS动态效果）
html
<div class="loading79"> |
<p class="p79">4rs<span>b</span>h<span>k</span>r</p> |
<p class="p79">_7u<span>i</span>90<span>@</span>v</p> |
<!-- 更多p标签... --> |
</div> |
css
.loading79 { |
writing-mode: vertical-rl; |
animation: eff79 0.6s linear infinite; |
} |
.p79:nth-child(1) { animation-delay: 0.1s; } |
.p79:nth-child(2) { animation-delay: 0.2s; } |
@keyframes eff79 { |
0% { transform: translateY(-40%); } |
100% { transform: translateY(140%); } |
} |
效果：垂直排列的代码片段如瀑布般循环流动，通过CSS变量和nth-child延迟实现错落动画。
2. 3D旋转立方体（无需JavaScript）
html
<div class="cube"> |
<div class="face front">FRONT</div> |
<div class="face back">BACK</div> |
<!-- 其他面... --> |
</div> |
css
.cube { |
transform-style: preserve-3d; |
animation: rotate 5s infinite linear; |
} |
.face { |
position: absolute; |
width: 200px; height: 200px; |
background: rgba(255,0,0,0.5); |
} |
.front { transform: translateZ(100px); } |
.back { transform: rotateY(180deg) translateZ(100px); } |
@keyframes rotate { |
100% { transform: rotateY(360deg); } |
} |
效果：通过transform-style: preserve-3d和rotateY实现立方体3D旋转，每个面可自定义内容。
3. 打字机效果（模拟打字过程）
html
<p class="typing">这是一段动态显示的文字</p> |
css
.typing { |
width: 0; |
overflow: hidden; |
border-right: 0.15em solid orange; |
white-space: nowrap; |
animation: |
typing 1s steps(40, end) forwards, |
blink-caret 0.5s step-end infinite; |
} |
@keyframes typing { |
to { width: 100%; } |
} |
@keyframes blink-caret { |
50% { border-color: transparent; } |
} |
效果：文字逐个显示，光标闪烁，通过steps()实现打字机逐字效果。
4. 悬停交互按钮（动态反馈）
html
<button class="hover-btn">悬停我</button> |
css
.hover-btn { |
transition: all 0.3s ease; |
transform: scale(1); |
} |
.hover-btn:hover { |
transform: scale(1.2) rotate(10deg); |
box-shadow: 0 5px 15px rgba(0,0,0,0.3); |
} |
效果：鼠标悬停时按钮放大、旋转并添加阴影，通过transform和transition实现平滑过渡。
5. 动态背景渐变（色彩流动）
css
body { |
background: linear-gradient(45deg, |
#ff0000, #ff7f00, #ffff00, |
#00ff00, #00ffff, #0000ff, |
#8b00ff, #ff00ff); |
background-size: 400% 400%; |
animation: gradient 15s ease infinite; |
} |
@keyframes gradient { |
0% { background-position: 0% 50%; } |
50% { background-position: 100% 50%; } |
100% { background-position: 0% 50%; } |
} |
效果：彩虹渐变背景持续流动，通过linear-gradient和background-size实现动态色彩过渡。
6. 响应式卡片布局（网格系统）
css
.container { |
display: grid; |
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
gap: 20px; |
} |
@media (max-width: 600px) { |
.container { grid-template-columns: 1fr; } |
} |
效果：卡片自动排列，小屏幕时单列显示，通过grid和媒体查询实现响应式布局。
7. 幽灵漂浮动画（纯CSS）
css
.ghost { |
position: relative; |
animation: float 3s ease-in-out infinite; |
} |
@keyframes float { |
0%, 100% { transform: translateY(0); } |
50% { transform: translateY(-20px); } |
} |
效果：元素上下漂浮，通过关键帧动画模拟幽灵漂浮效果。
8. 开关切换按钮（交互控件）
html
<label class="switch"> |
<input type="checkbox"> |
<span class="slider"></span> |
</label> |
css
.switch { position: relative; width: 60px; height: 34px; } |
.slider { |
position: absolute; |
transition: 0.4s; |
background: #ccc; |
} |
input:checked + .slider { background: #2196F3; } |
效果：滑动开关切换状态，通过transition和transform实现平滑过渡。
这些示例均使用纯HTML+CSS实现，无需JavaScript，可直接复制到HTML文件中运行。每个案例均包含核心代码和实现原理，适合学习CSS动画、交互设计和响应式布局。通过调整颜色、尺寸、动画时间等参数，可快速定制个性化效果。