您的位置:首页 > Web前端 > CSS

css模拟太阳系旋转效果

2018-02-06 16:24 288 查看


代码:

<style>
body, html {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
background-color: #12162B;
}

.jawn {
position: relative;
background-color: #F8E71C;
width: 10px;
height: 10px;
margin: 0 auto;
border-radius: 50%;
}
.jawn:after, .jawn:before {
content: "";
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
}
.jawn:after {
left: -10px;
top: -5px;
background-color: #C7C2A6;
transform-origin: 15px 10px;
animation: axis 1s linear infinite;
}
.jawn:before {
left: -25px;
top: -15px;
background-color: #009bff;
transform-origin: 30px 20px;
animation: axis 2s linear infinite;
}

@keyframes axis {
0% {
transform: rotateZ(0deg) translate3d(0, 0, 0);
}
100% {
transform: rotateZ(360deg) translate3d(0, 0, 0);
}
}

</style>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  web前端 css 太阳系