나는 배우려고 노력하고있어 animation
및 keyframes
CSS3에, 나는 내가 할 수있는 방법 궁금 #moon-orbit
궤도 주위를 #earth
? 실제 생활에서 처럼요.
html, body {
background-color : #000000;
height : 90%;
width : 90%;
}
#sun {
background-color : #ba8f27;
border-radius : 200px;
box-shadow : 0 0 128px red;
margin-top : -100px;
margin-left : -100px;
left : 50%;
height : 200px;
position : absolute;
top : 50%;
width : 200px;
}
#earth-orbit {
border: 2px solid #373737;
border-radius: 50%;
left: 50%;
height: 500px;
margin-top: -250px;
margin-left: -250px;
position: absolute;
top: 50%;
width: 500px;
-webkit-animation: spin-right 10s linear infinite;
-moz-animation: spin-right 10s linear infinite;
-ms-animation: spin-right 10s linear infinite;
-o-animation: spin-right 10s linear infinite;
animation: spin-right 10s linear infinite;
}
#moon-orbit {
border-radius: 50%;
left: 50%;
height: 500px;
margin-top: -250px;
margin-left: -250px;
position: absolute;
top: 50%;
width: 500px;
transform: rotate(360deg);
transform-origin: 50% 100%;
}
#earth {
background-color : #2d7ddc;
border-radius : 50px;
margin-left : -25px;
margin-top : -25px;
height : 50px;
left : 50%;
position : absolute;
top : 0%;
width : 50px;
}
#moon {
background-color : #b2b2b2;
border-radius : 50px;
margin-left : -25px;
margin-top : -25px;
height : 16px;
left : 43%;
position : absolute;
top : 0%;
width : 16px;
}
@-webkit-keyframes spin-right {
100% {
-webkit-transform: rotate(360deg);
}
}
<div id="sun"></div>
<div id="earth-orbit">
<div id="earth"></div>
<div id="moon-orbit">
<div id="moon"></div>
</div>
</div>
달 홀더를 추가하고 지구 중앙에 배치하고 해당 div를 회전 할 수 있습니다.
추가 된 항목 :
HTML :
<div class="moon-holder">
<div id="moon"></div>
</div>
CSS :
.moon-holder {
position: absolute;
left: 50%;
top: 0;
width: 50px;
height: 50px;
margin: -25px 0 0 -25px;
-webkit-animation: spin-right 5s linear infinite;
-moz-animation: spin-right 5s linear infinite;
-ms-animation: spin-right 5s linear infinite;
-o-animation: spin-right 5s linear infinite;
animation: spin-right 5s linear infinite;
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다