CSS3是一種用于網(wǎng)頁樣式美化，甚至是產(chǎn)生復(fù)雜動畫的語言。隨著時代的變化，越來越多的人將注意力集中在了場景動畫效果上，而這些效果可以通過 CSS3 很輕松地實現(xiàn)。

/* 地球公轉(zhuǎn)動畫效果 */
@keyframes earth {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
.earth {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
border-radius: 50%;
background-image: url('earth.png');
background-size: cover;
animation: earth 10s linear infinite;
}
/* 文字浮現(xiàn)動畫效果 */
@keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
.text {
opacity: 0;
animation: fadeIn 2s ease-in forwards;
}
/* 無限滾動動畫效果 */
@keyframes scroll {
0% {transform: translateX(0);}
100% {transform: translateX(-100%);}
}
.scroll {
display: inline-block;
white-space: nowrap;
overflow: hidden;
animation: scroll 30s linear infinite;
}

如上述代碼，三種不同的場景動畫效果展示了出來。第一個效果“地球公轉(zhuǎn)動畫”，將一個圖片繞著自己旋轉(zhuǎn)，營造出宇宙和太空的感覺；第二個效果“文字浮現(xiàn)動畫”，動態(tài)地呈現(xiàn)出文字，使頁面增添層次感和立體感；最后一個效果“無限滾動動畫”，可以將一段文字永無止境地滾動，特別適合于垂直滾動的網(wǎng)站。通過 CSS3 的這些場景動畫效果，你可以為你的頁面增添色彩，讓人們體驗更好。