当前位置：首页 > news >正文

CSS 动画进阶：创造令人惊叹的视觉效果

news 2026/6/14 5:40:39

CSS 动画进阶：创造令人惊叹的视觉效果

从基础到高级，掌握 CSS 动画的全部潜能。

一、高级动画概念

作为一名追求像素级还原的 UI 匠人，我对 CSS 动画有着特殊的热爱。高级 CSS 动画不仅能提升用户体验，还能为网站增添独特的视觉魅力。从复杂的关键帧动画到精细的缓动函数，CSS 动画为我们提供了无限的创意空间。

二、关键帧动画

1. 复杂关键帧

@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } } .bounce { animation: bounce 2s ease-in-out infinite; }

2. 多属性动画

@keyframes complexAnimation { 0% { transform: scale(1) rotate(0deg); opacity: 1; background-color: #667eea; } 50% { transform: scale(1.2) rotate(180deg); opacity: 0.8; background-color: #764ba2; } 100% { transform: scale(1) rotate(360deg); opacity: 1; background-color: #667eea; } } .complex-animation { animation: complexAnimation 3s ease-in-out infinite; }

三、缓动函数

1. 自定义缓动函数

/* 使用 cubic-bezier 创建自定义缓动 */ .custom-ease { transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .custom-ease:hover { transform: scale(1.1); } /* 常用缓动函数 */ .ease-in { transition-timing-function: cubic-bezier(0.42, 0, 1, 1); } .ease-out { transition-timing-function: cubic-bezier(0, 0, 0.58, 1); } .ease-in-out { transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }

2. 弹簧效果

.spring { transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .spring:hover { transform: scale(1.1); }

四、动画组合

1. 序列动画

.sequence-animation { animation: fadeIn 1s ease-out, slideUp 1s ease-out 1s, bounce 2s ease-in-out 2s infinite; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { transform: translateY(20px); } to { transform: translateY(0); } } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

2. 交错动画

.staggered-animation { display: flex; gap: 10px; } .staggered-item { width: 50px; height: 50px; background-color: #667eea; animation: fadeInUp 0.5s ease-out; } .staggered-item:nth-child(1) { animation-delay: 0s; } .staggered-item:nth-child(2) { animation-delay: 0.1s; } .staggered-item:nth-child(3) { animation-delay: 0.2s; } .staggered-item:nth-child(4) { animation-delay: 0.3s; } .staggered-item:nth-child(5) { animation-delay: 0.4s; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

五、实战案例

1. 加载动画

.loader { width: 60px; height: 60px; border: 5px solid #f3f3f3; border-top: 5px solid #667eea; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* 脉冲加载动画 */ .pulse-loader { width: 60px; height: 60px; background-color: #667eea; border-radius: 50%; animation: pulse 1.5s ease-in-out infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.7; } }

2. 悬停效果

.hover-card { width: 200px; height: 200px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; font-weight: bold; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .hover-card:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); background: linear-gradient(135deg, #764ba2 0%, #667eea 100%); }

3. 文本动画

.text-animation { font-size: 2rem; font-weight: bold; background: linear-gradient(135deg, #667eea, #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: textShine 3s ease-in-out infinite; } @keyframes textShine { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* 打字动画 */ .typing-animation { overflow: hidden; border-right: 0.15em solid #667eea; white-space: nowrap; margin: 0 auto; letter-spacing: 0.15em; animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite; } @keyframes typing { from { width: 0; } to { width: 100%; } } @keyframes blink-caret { from, to { border-color: transparent; } 50% { border-color: #667eea; } }