1.效果
html+css实现地球绕太阳旋转
2.代码
html
<div class="main">
<div class="son">
<div class="earch"></div>
</div>
</div>
css
.main {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.main div {
border-radius: 100%;
}
.son {
width: 300px;
height: 300px;
background-color: rgb(255, 208, 75);
position: relative;
perspective: 800px;
transform-style: preserve-3d;
background-image: url('../assets/son.jpg');
background-repeat: no-repeat;
background-size: 120%;
background-position: 50% 50%;
}
.earch {
width: 80px;
height: 80px;
background-color: skyblue;
position: absolute;
top: 50%;
left:-80%;
transform: translate(-50%,-50%);
animation: myEarch 2s infinite linear;
background-image: url('../assets/earch.jpg');
background-repeat: no-repeat;
background-size: contain;
}
@keyframes myEarch {
0%{
transform: translate3d(0px,0px,0);
}
10%{
transform: translate3d(140px,5px,200px);
}
20%{
transform: translate3d(260px,10px,400px);
}
30%{
transform: translate3d(380px,15px,400px);
}
40%{
transform: translate3d(500px,10px,200px);
}
50%{
transform: translate3d(640px,5px,0px);
}
60%{
transform: translate3d(500px,10px,-100px);
}
70%{
transform: translate3d(380px,15px,-100px);
}
80%{
transform: translate3d(260px,10px,-100px);
}
90%{
transform: translate3d(140px,5px,-100px);
}
100%{
transform: translate3d(0px,0px,-100px);
}
}