首頁 > 開發者 > JavaScript
[css3] 看部落格學習別人的旋轉的星球，css3部落格
定義一個div 太陽軌道sunline，邊框顯示出來，定義position為relative
#sunline{
width: 500px;
height: 500px;
border:2px solid #000;
border-radius: 50%;
margin:50px auto;
position: relative;
animation:sunRotate 5s;
}
定義一個div 太陽sun，把紅太陽放在中間，置中顯示，定義position為absolute，
距左50%，劇上50%，左邊距負的寬度的一半，上邊距負的高度的一半
#sun{
background: red;
width: 150px;
height: 150px;
position: absolute;
left: 50%;
top:50%;
margin-left:-75px;
margin-top: -75px;
border-radius: 50%;
}
定義一個地球的軌道 earthline，邊框顯示出來，定義position為absolute，距左50%，劇上負的高度一半，左邊距負的寬度的一半
#earthline{
width: 200px;
height: 200px;
border:1px solid #000;
border-radius: 50%;
position: absolute;
left: 50%;
top: -100px;
margin-left: -100px;
}
定義一個div 地球 earth，把地球放在水平置中，太陽軌道垂直地球置中，定義position為absolute，距左50%，劇上50%，左邊距負的寬度的一半，上邊距負的高度的一半
#earth{
background: green;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -50px;
}
定義一個月球moon，定義position為absolute，距左50%，劇上負的高度一半，左邊距負的寬度的一半
#moon{
width: 40px;
height: 40px;
background: blue;
border-radius: 50%;
position: absolute;
left: 50%;
margin-left: -20px;
top: -20px;
}
定義動畫@keyframes，100%的進度的時候，旋轉一圈
@keyframes sunRotate{
100%{
transform:rotate(360deg);
}
}
為太陽軌道sunline綁定動畫，使用屬性animation，參數：規則名稱，執行時間，速度曲線，延遲時間，播放次數，是否反向
animation:sunRotate 10s linear 0s infinite;
速度曲線： linear（線性勻速） ease（緩動）
播放次數：infinite（無限次數）
為地球軌道earthline綁定動畫
animation:sunRotate 5s linear 0s infinite; 已耗用時間不一樣，這個快
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><style>#sunline{ width: 500px; height: 500px; border:2px solid #000; border-radius: 50%; margin:100px auto; position: relative; animation:sunRotate 10s linear 0s infinite;}#sun{ background: red; width: 150px; height: 150px; position: absolute; left: 50%; top:50%; margin-left:-75px; margin-top: -75px; border-radius: 50%;}#earthline{ width: 200px; height: 200px; border:1px solid #000; border-radius: 50%; position: absolute; left: 50%; top: -100px; margin-left: -100px; animation:sunRotate 5s linear 0s infinite;}#earth{ background: green; width: 100px; height: 100px; border-radius: 50%; position: absolute; left: 50%; margin-left: -50px; top: 50%; margin-top: -50px;}#moon{ width: 40px; height: 40px; background: blue; border-radius: 50%; position: absolute; left: 50%; margin-left: -20px; top: -20px;}@keyframes sunRotate{ 100%{ transform:rotate(360deg); }}</style></head><body><div id="sunline"> <div id="sun"></div> <div id="earthline"> <div id="earth"></div> <div id="moon"></div> </div></div></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
