CSS3 中提供了許多有趣的特效，如今我們就來學(xué)習(xí)一下類似星星移動效果的實現(xiàn)方法。

.star {
position: absolute; /*絕對定位*/
top: 50%; /*垂直居中*/
left: 50%; /*水平居中*/
transform-origin: center; /*設(shè)置旋轉(zhuǎn)中心*/
animation: twinkle 2s linear infinite; /*定義動畫*/
}
@keyframes twinkle {
0%, 100% {
opacity: 1; /*不透明度為 1*/
}
50% {
opacity: 0; /*不透明度為 0*/
}
0% {
transform: scale(0); /*初始大小為 0*/
}
100% {
transform: scale(2); /*結(jié)束大小為 2 倍*/
}
}

首先，我們需要給元素添加一個類名為star的樣式。接著，我們將它設(shè)置為絕對定位，并將它的位置置于頁面的中央。

接下來，我們設(shè)置元素的旋轉(zhuǎn)中心為圖形的中心，這樣在動畫中旋轉(zhuǎn)時才不會偏移。

最后，我們定義了一個名為twinkle的動畫來控制元素的縮放和透明度，使其看起來像是在閃爍。

通過上述代碼，我們就可以輕松地實現(xiàn)一個類似星星移動效果的動畫。