还在羡慕那些酷炫的网页动画效果吗？其实你也能轻松实现！CSS3动画并不神秘，跟着我一起探索，让你的网页元素"活"起来！
CSS3动画
CSS3动画就是让这个按钮能够平滑地从一种状态变化到另一种状态的神奇技术。比如从透明变成不透明，从左移到右，或者从小变大。
简单来说：CSS3动画 = 定义变化过程 + 设置变化规则
动画和过渡的区别
- 过渡(transition)：需要用户触发（比如鼠标悬停），只能定义开始和结束状态
- 动画(animation)：可以自动播放，能定义多个中间状态，控制更精细
写CSS3动画的步骤
第一步：定义动画剧本 (@keyframes)
把动画想象成拍电影，首先需要写剧本——这就是@keyframes的作用：
/* 定义一个叫"渐现"的动画剧本 */
@keyframes fadeIn {
/* 开场：完全透明 */
from {
opacity: 0;
}
/* 结局：完全显示 */
to {
opacity: 1;
}
}
/* 或者用百分比控制，更精确！ */
@keyframes bounce {
/* 开始状态 */
0% {
transform: translateY(0);
}
/* 弹到半空中 */
50% {
transform: translateY(-50px);
}
/* 落回原地 */
100% {
transform: translateY(0);
}
}
第二步：把剧本交给演员 (animation属性)
有了剧本，现在要让网页元素这个"演员"来表演：
.my-element {
/* 简写方式：一句话搞定所有设置 */
animation: fadeIn 2s ease-in-out 1s 3 alternate;
}
/* 等价于详细写法： */
.my-element {
animation-name: fadeIn; /* 用哪个剧本 */
animation-duration: 2s; /* 表演时长 */
animation-timing-function: ease-in-out; /* 表演节奏 */
animation-delay: 1s; /* 开场等待 */
animation-iteration-count: 3; /* 重复次数 */
animation-direction: alternate; /* 表演方向 */
}
案例：霓虹流光文字动画
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>霓虹流光文字动画</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #0c0e1d;
font-family: 'Arial', sans-serif;
overflow: hidden;
}
.container {
text-align: center;
position: relative;
padding: 40px;
border-radius: 15px;
background: rgba(15, 17, 33, 0.8);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
z-index: 2;
}
.neon-text {
font-size: 4rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 4px;
color: transparent;
background: linear-gradient(90deg, #ff00cc, #3333ff, #00ccff, #ff00cc);
background-size: 400% 100%;
-webkit-background-clip: text;
background-clip: text;
animation: gradient-flow 4s linear infinite;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
margin-bottom: 30px;
}
@keyframes gradient-flow {
0% {
background-position: 0% 50%;
}
100% {
background-position: 400% 50%;
}
}
.subtitle {
color: rgba(255, 255, 255, 0.7);
font-size: 1.2rem;
margin-bottom: 40px;
letter-spacing: 1px;
}
.orb {
width: 200px;
height: 200px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #ff00cc, transparent 50%),
radial-gradient(circle at 70% 70%, #3333ff, transparent 50%),
radial-gradient(circle at 40% 80%, #00ccff, transparent 50%);
margin: 0 auto 40px;
filter: blur(15px);
opacity: 0.7;
animation: orb-pulse 6s ease-in-out infinite;
}
@keyframes orb-pulse {
0%, 100% {
transform: scale(1) rotate(0deg);
opacity: 0.5;
}
50% {
transform: scale(1.2) rotate(180deg);
opacity: 0.8;
}
}
.button {
display: inline-block;
padding: 15px 40px;
background: rgba(255, 255, 255, 0.1);
color: white;
text-decoration: none;
border-radius: 30px;
font-weight: 600;
letter-spacing: 1px;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: all 0.5s ease;
}
.button:hover {
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 0 20px rgba(100, 100, 255, 0.3);
}
.button:hover::before {
left: 100%;
}
.particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.particle {
position: absolute;
width: 4px;
height: 4px;
background: rgba(255, 255, 255, 0.5);
border-radius: 50%;
animation: particle-float 8s linear infinite;
}
.particle:nth-child(1) {
top: 20%;
left: 10%;
animation-delay: 0s;
}
.particle:nth-child(2) {
top: 60%;
left: 85%;
animation-delay: 2s;
}
.particle:nth-child(3) {
top: 80%;
left: 15%;
animation-delay: 4s;
}
.particle:nth-child(4) {
top: 30%;
left: 75%;
animation-delay: 6s;
}
@keyframes particle-float {
0% {
transform: translateY(0) translateX(0);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(-100px) translateX(20px);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="particles">
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
</div>
<div class="container">
<h1 class="neon-text">CSS3动画</h1>
<p class="subtitle">使用渐变背景和关键帧创建流畅的视觉效果</p>
<div class="orb"></div>
<a href="#" class="button">探索更多</a>
</div>
</body>
</html>
CSS3动画核心属性
| 属性 | 取值 | 说明 | 使用场景 |
|---|---|---|---|
| animation-timing-function 动画速度曲线 | ease | 默认值，慢开始→加速→慢结束 | 适合大多数自然运动效果 |
linear | 匀速运动 | 机械运动、匀速移动 | |
ease-in | 慢开始，然后加速 | 物体从静止开始加速 | |
ease-out | 快速开始，慢结束 | 物体减速停止 | |
ease-in-out | 慢开始和慢结束 | 对称的缓动效果 | |
cubic-bezier(n,n,n,n) | 自定义贝塞尔曲线 | 完全自定义速度曲线 | |
| animation-iteration-count 动画播放次数 | 1 | 播放1次（默认值） | 一次性动画效果 |
数字 | 播放指定次数（如：3） | 需要重复特定次数的动画 | |
infinite | 无限循环播放 | 加载动画、背景动画 | |
| animation-direction 动画方向 | normal | 正向播放（默认值） | 单向动画 |
reverse | 反向播放 | 倒放效果 | |
alternate | 先正向再反向，交替进行 | 呼吸效果、弹跳动画 | |
alternate-reverse | 先反向再正向，交替进行 | 反向开始的交替动画 | |
| animation-fill-mode 动画填充模式 | none | 动画执行前后不应用任何样式（默认） | 动画结束后回到初始状态 |
forwards | 动画完成后保持最后一帧样式 | 需要保持结束状态的动画 | |
backwards | 动画延迟期间应用第一帧样式 | 需要预加载初始状态的动画 | |
both | 同时应用forwards和backwards规则 | 需要控制前后状态的复杂动画 |
⚠️ 重要注意事项
- 性能优先：优先使用
transform和opacity制作动画，避免触发重排 - 兼容性：生产环境记得添加浏览器前缀（-webkit-、-moz- 等）
- 适度使用：动画应增强体验，而非分散注意力
- 可访问性：为动画敏感用户提供
prefers-reduced-motion选项 - 硬件加速：使用
transform: translateZ(0)开启GPU加速
