CSS3 提供了非常強大的動畫效果,其中之一就是星云環(huán)繞效果。
在 HTML 中,我們可以利用一個 div 元素表示整個星球,利用另外的 div 元素表示太空中的星云。代碼如下:
使用 CSS3,我們可以對兩個 div 元素添加樣式,從而實現(xiàn)星云環(huán)繞的效果。
首先,對于星球的 div,我們需要設置其寬度、高度、邊框屬性以及背景顏色:
.planet {
width: 200px;
height: 200px;
border-radius: 50%;
border: 2px solid #ddd;
background-color: #e8e8e8;
}
接下來,對于星云的 div 元素,我們需要設置其寬度、高度、消失時的透明度以及背景顏色:
.nebula {
position: absolute;
top: -200px;
left: -200px;
width: 600px;
height: 600px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 0 40px 20px #fff;
opacity: 1;
animation: nebulaAround 5s ease-in-out infinite;
}
@keyframes nebulaAround {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
這里,我們通過設置位置為絕對定位,并設置 top 和 left 的負值,讓其不可見,等待出現(xiàn)。然后,通過設置寬度和高度,讓其覆蓋整個屏幕。設置背景色為白色,邊框屬性,以及無限無縫旋轉的動畫效果。
最后,將兩個 div 元素放在一起,就可以看到整個星球被星云環(huán)繞的效果了。