CSS 動畫可以讓網(wǎng)頁元素生動起來，通過一些簡單的屬性設(shè)置，我們就能實(shí)現(xiàn)富有動感的效果。在這篇文章中，我們將介紹如何使用純 CSS 實(shí)現(xiàn)幾種常見的動畫效果，幫助你為網(wǎng)頁增添更多趣味和互動性。
一、CSS 動畫基礎(chǔ)
CSS 動畫由兩個主要部分組成：
@keyframes 規(guī)則：定義動畫的關(guān)鍵幀，描述動畫的開始、結(jié)束及中間過程。
animation 屬性：將定義好的 @keyframes 動畫應(yīng)用到元素上。
1.1 @keyframes 規(guī)則
@keyframes 規(guī)則用于創(chuàng)建動畫的關(guān)鍵幀，它允許你指定動畫的不同階段。基本的語法如下：
cssCopy Code@keyframes animationName {
0% { /* 動畫起始狀態(tài) */ }
50% { /* 動畫的中間狀態(tài) */ }
100% { /* 動畫的結(jié)束狀態(tài) */ }
}
0% 代表動畫的開始狀態(tài)。
100% 代表動畫的結(jié)束狀態(tài)。
可以使用多個百分比來指定中間狀態(tài)。
1.2 animation 屬性
animation 屬性用于將 @keyframes 規(guī)則應(yīng)用到一個元素上，常見的語法如下：
cssCopy Codeelement {
animation: animationName duration timingFunction delay iterationCount direction;
}
animation-name：指定動畫的名稱，對應(yīng) @keyframes 中定義的名稱。
animation-duration：指定動畫持續(xù)的時間。
animation-timing-function：定義動畫的速度曲線(如線性、緩慢開始等)。
animation-delay：設(shè)置動畫延遲時間。
animation-iteration-count：設(shè)置動畫的播放次數(shù)。
animation-direction：設(shè)置動畫的播放方向(如正常播放或反向播放)。
二、實(shí)現(xiàn)簡單的 CSS 動畫
接下來，我們將通過幾個例子來演示如何用 CSS 實(shí)現(xiàn)簡單的動畫效果。
2.1 動畫 1：平移動畫
平移動畫是指元素在頁面上水平或垂直移動。以下示例演示了一個元素從左到右的平移動畫。
HTML 代碼：
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>平移動畫</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div></div>
</body>
</html>
CSS 代碼：
cssCopy Code/* 設(shè)置頁面背景 */
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
/* 定義動畫 */
.moving-box {
width: 100px;
height: 100px;
background-color: #3498db;
animation: moveRight 3s linear infinite; /* 動畫名稱：moveRight，時長：3秒，線性，重復(fù)無限次 */
}
@keyframes moveRight {
0% {
transform: translateX(0); /* 起始位置 */
}
100% {
transform: translateX(300px); /* 結(jié)束位置 */
}
}
在這個例子中，.moving-box 元素將會在 3 秒內(nèi)從左側(cè)平移到右側(cè)，并且該動畫將無限循環(huán)。
2.2 動畫 2：漸變透明度動畫
這個動畫展示了元素透明度的變化，從完全透明到完全不透明，形成漸變的效果。
HTML 代碼：
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>漸變透明度動畫</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div></div>
</body>
</html>
CSS 代碼：
cssCopy Codebody {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.fade-box {
width: 150px;
height: 150px;
background-color: #e74c3c;
opacity: 0; /* 初始透明度 */
animation: fadeIn 4s ease-in-out infinite; /* 動畫名稱：fadeIn，時長：4秒，緩入緩出 */
}
@keyframes fadeIn {
0% {
opacity: 0; /* 起始透明度 */
}
50% {
opacity: 1; /* 中間透明度 */
}
100% {
opacity: 0; /* 結(jié)束透明度 */
}
}
這個動畫使 .fade-box 元素在 4 秒內(nèi)從完全透明逐漸變?yōu)椴煌该鳎僮兓赝该?，?shí)現(xiàn)漸變效果。
2.3 動畫 3：旋轉(zhuǎn)動畫
旋轉(zhuǎn)動畫使元素圍繞其中心點(diǎn)旋轉(zhuǎn)。下面的例子演示了一個旋轉(zhuǎn)的方塊。
HTML 代碼：
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旋轉(zhuǎn)動畫</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div></div>
</body>
</html>
CSS 代碼：
cssCopy Codebody {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.rotate-box {
width: 100px;
height: 100px;
background-color: #9b59b6;
animation: rotate 5s linear infinite; /* 動畫名稱：rotate，時長：5秒，線性，重復(fù)無限次 */
}
@keyframes rotate {
0% {
transform: rotate(0deg); /* 起始角度 */
}
100% {
transform: rotate(360deg); /* 結(jié)束角度 */
}
}
這個例子使 .rotate-box 元素在 5 秒內(nèi)旋轉(zhuǎn) 360 度，形成一個連續(xù)的旋轉(zhuǎn)效果。
三、其他常見的 CSS 動畫效果
3.1 縮放動畫
通過調(diào)整元素的大小，制作縮放效果。
cssCopy Code@keyframes scaleUp {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
.scale-box {
width: 100px;
height: 100px;
background-color: #2ecc71;
animation: scaleUp 3s ease-in-out infinite;
}
3.2 移動與旋轉(zhuǎn)動畫
結(jié)合平移和旋轉(zhuǎn)，制作更復(fù)雜的動畫。
cssCopy Code@keyframes moveRotate {
0% {
transform: translateX(0) rotate(0deg);
}
50% {
transform: translateX(200px) rotate(180deg);
}
100% {
transform: translateX(0) rotate(360deg);
}
}
.move-rotate-box {
width: 100px;
height: 100px;
background-color: #f39c12;
animation: moveRotate 4s ease-in-out infinite;
}
CSS 動畫是實(shí)現(xiàn)動態(tài)效果的強(qiáng)大工具，可以提升網(wǎng)頁的交互性和視覺效果。通過簡單的 @keyframes 和 animation 屬性，我們能夠創(chuàng)建平移、旋轉(zhuǎn)、透明度變化、縮放等各種動畫效果。在實(shí)際開發(fā)中，你可以將這些基本動畫技巧靈活運(yùn)用，創(chuàng)造出更豐富的網(wǎng)頁體驗(yàn)。
