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