CSS3和H5星系動畫

CSS3和H5技術的應用已經越來越廣泛，其中星系動畫是一個引人注目的特效效果之一。此特效通過CSS3的translate3D變形動畫實現，可以實現星星在空間中好像真正運動一樣。下面的代碼示例淺顯易懂，可以聯想到使用場景。

body {
width: 100%;
height: 100%;
background-color: #000;
perspective: 1000px;
}
.star {
width: 1px;
height: 1px;
background: #fff;
border-radius: 50%;
position: absolute;
box-shadow: 0 0 20px #fff;
animation: hoop 5s infinite linear;
}
@keyframes hoop {
0% {
transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg);
}
100% {
transform: translate3d(500px, 1000px, 2000px) rotateX(360deg) rotateY(360deg);
}
}
.star1 {
top: 150px;
left: 350px;
}
.star2 {
top: 50px;
left: 550px;
}
.star3 {
top: 200px;
left: 700px;
}

通過上述代碼，我們可以看到background-color: #000設置為黑色背景。perspective: 1000px為立體空間（包括3D正交、3D透視），box-shadow可以為星星添加高光。最后，在我們的demo里，我們添加了三個星星并在Animation中實現生動的動效。

星系動畫展示出了CSS3和H5技術強大的顯示效果，可以將其應用于廣泛的場合。CSS3和H5技術在網頁游戲和Micro-site建設中，動畫是一種非常重要的效果。圍繞著3D透視、邊框圓角等技術，以及移動端和新一代瀏覽器的不斷誕生，我們相信這個領域會繼續更新。