CSS3中有一個(gè)非?？犰诺男Ч褪堑厍蜣D(zhuǎn)動(dòng)的動(dòng)畫(huà)效果。下面我們來(lái)學(xué)習(xí)一下如何實(shí)現(xiàn)它。

.earth {
width: 200px;
height: 200px;
border-radius: 50%;
background: url('earth.png') no-repeat center center;
background-size: cover;
position: relative;
-webkit-animation: earth-rotate 10s infinite linear;
animation: earth-rotate 10s infinite linear;
}
@-webkit-keyframes earth-rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@keyframes earth-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

首先我們創(chuàng)建一個(gè)div，并給它一個(gè)background設(shè)置為地球圖片，然后定義一個(gè)動(dòng)畫(huà) keyframes ，rotate讓地球沿著中心點(diǎn)無(wú)限制的旋轉(zhuǎn)。最后通過(guò)添加 animation 屬性，將動(dòng)畫(huà)添加到地球上。

以上是地球旋轉(zhuǎn)的動(dòng)畫(huà)效果。我們可以通過(guò)這個(gè)非常簡(jiǎn)單的方法，來(lái)創(chuàng)建許多不同的動(dòng)畫(huà)效果。