CSS是前端開發(fā)中一種非常重要的技術，尤其在網(wǎng)頁設計中，CSS可以為頁面賦予各種各樣的效果，使頁面更加生動、動態(tài)、有趣。本文將介紹CSS中如何制作分層動畫。

分層動畫是指在一個元素的不同層面上使用動畫效果，使整個元素看起來更加生動。下面是一個簡單的分層動畫實例：

<div class="wrapper">
<div class="layer1"></div>
<div class="layer2"></div>
<div class="layer3"></div>
</div>
.wrapper {
position: relative;
width: 200px;
height: 200px;
margin: 50px auto;
}
.layer1, .layer2, .layer3 {
position: absolute;
width: 200px;
height: 200px;
top: 0;
left: 0;
}
.layer1 { background-color: yellow; }
.layer2 { background-color: blue; }
.layer3 { background-color: red; }
.layer1 {
animation-name: layer1;
animation-duration: 2s;
animation-delay: 0.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.layer2 {
animation-name: layer2;
animation-duration: 2s;
animation-delay: 0.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.layer3 {
animation-name: layer3;
animation-duration: 2s;
animation-delay: 0.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes layer1 {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes layer2 {
from { transform: rotate(0deg); }
to { transform: rotate(-360deg); }
}
@keyframes layer3 {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

上面的代碼中，首先創(chuàng)建了一個包含三個div的wrapper容器，每個div分別代表了不同的層次。然后通過使用CSS的position屬性，將三個div層疊在一起。接下來為每個div分別設置不同的背景顏色，并為每個div設置了不同的動畫效果（通過設置animation-name、animation-duration、animation-delay、animation-iteration-count、animation-direction等屬性來實現(xiàn)），最后通過keyframes將每個動畫效果的起始點和結束點設置出來。

通過上述代碼的實現(xiàn)，即可實現(xiàn)一個非常簡單的分層動畫效果。當然，在實際應用中，我們可以通過調(diào)整各種CSS屬性的值，來實現(xiàn)更多更豐富的分層動畫效果，比如，透明度變化、縮放等等。希望本文能給大家?guī)硪恍椭?/p>