微信小程序--行星轨迹
海轰Pro
共 2857字,需浏览 6分钟
·
2021-03-10 21:34
行星轨迹
效果展示
Demo代码
index.wxml
<view id="container">
<view id="sun"></view>
<view class="orbit" id="earth-orbit">
<view class="globe" id="earth">
<view class="orbit" id="moon-orbit">
<view class="globe" id="moon"></view>
</view>
</view>
</view>
</view>
index.wxss
page {
background-color: #20202c;
height: 100vh;
}
#container {
height: 400px;
left: calc(50% - 200px);
position: absolute;
top: calc(50% - 200px);
width: 400px;
}
#container #sun {
background-color: yellow;
border-radius: 50%;
box-shadow: 0 0 30px white;
height: 100px;
left: 150px;
position: absolute;
top: 150px;
width: 100px;
}
#container .orbit {
border: solid;
border-color: white transparent transparent transparent;
border-radius: 50%;
border-width: 1px 1px 0 0;
box-sizing: border-box;
position: absolute;
transform: rotate(0deg);
transform-origin: center;
}
#container .orbit#earth-orbit {
animation: orbit 6s linear infinite;
height: 300px;
left: 50px;
top: 50px;
width: 300px;
}
#container .orbit#moon-orbit {
animation: orbit 2.7s linear infinite;
height: 80px;
left: -25px;
top: -25px;
width: 80px;
}
#container .orbit .globe {
border-radius: 50%;
position: absolute;
}
#container .orbit .globe#earth {
background: aqua;
height: 30px;
right: 28px;
top: 28px;
width: 30px;
}
#container .orbit .globe#moon {
background: #d6d6d6;
height: 12px;
right: 2px;
top: 8px;
width: 12px;
}
@-webkit-keyframes orbit {
to {
transform: rotate(360deg);
}
}
@keyframes orbit {
to {
transform: rotate(360deg);
}
}
说明
1.学习于网络
2.Demo已同步至小程序:
海轰Pro
评论