今天我們來學(xué)習(xí)如何使用CSS讓圖片繞中心旋轉(zhuǎn)。這個(gè)效果可以為網(wǎng)頁增添不少趣味和動(dòng)感。
首先，要讓圖片繞中心旋轉(zhuǎn)，我們需要將圖片的位置移動(dòng)到中心點(diǎn)。我們可以使用CSS的transform屬性來實(shí)現(xiàn)。代碼如下：
img{
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
}上面的代碼中，我們使用了translate函數(shù)來將圖片向左上方移動(dòng)50%的寬度和高度（也就是向中心點(diǎn)移動(dòng)，因?yàn)閳D片是絕對(duì)定位）。
接下來，我們需要給圖片添加旋轉(zhuǎn)動(dòng)畫。我們可以使用CSS的animation屬性來實(shí)現(xiàn)。代碼如下：img{
animation: spin 2s linear infinite;
}
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}在上面的代碼中，我們創(chuàng)建了一個(gè)名為spin的動(dòng)畫，設(shè)置了它的持續(xù)時(shí)間為2秒，以線性的方式（linear）無限循環(huán)播放。在@keyframes規(guī)則中，我們?cè)O(shè)置了旋轉(zhuǎn)動(dòng)畫從0度旋轉(zhuǎn)到360度旋轉(zhuǎn)。
最終的代碼實(shí)現(xiàn)就像這樣：p {
text-align: center;
}
img{
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
animation: spin 2s linear infinite;
}
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}到這里，我們就成功的實(shí)現(xiàn)了圖片繞中心旋轉(zhuǎn)的代碼，效果如下：