色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css3行星公轉

李中冰2年前11瀏覽0評論

CSS3行星公轉是一項非常酷炫的技術,它可以讓我們在網頁上創建出逼真的太陽系、宇宙等效果。下面我們一起來學習如何利用CSS3來實現行星的公轉。

/*設置太陽*/
.sun {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
border-radius: 50%;
background-color: yellow;
box-shadow: 0 0 30px red;
}
/*設置行星*/
.planet {
position: absolute;
top: 10%;
left: 50%;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: blue;
box-shadow: 0 0 5px rgba(0, 0, 255, 0.5);
transform-origin: center center;
animation: orbit 8s infinite linear;
}
@keyframes orbit {
from { transform: rotate(0deg) translateX(100px) rotate(0deg); }
to { transform: rotate(360deg) translateX(100px) rotate(-360deg); }
}

上面的代碼中,我們首先設置了太陽的樣式,然后設置行星的樣式。我們通過設置行星的位置、大小、形狀、背景色等來模擬真實的行星。值得注意的是,我們還設置了一個動畫效果——公轉,這是通過給行星添加“orbit”動畫來實現的。通過設置“animation”屬性,我們可以實現行星圍繞太陽的不斷公轉。

好了,到這里我們就學會了如何利用CSS3來實現行星的公轉效果,希望大家喜歡。