CSS3 简单的太阳系系统动画

使用CSS3 transform: rotate 方法实现。

css3，solar

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1646
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html,
body {
    background: #222;
}
.container {
    margin: 200px auto;
    width: 768px;
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
    transform: scale(0.6);
}
.sun {
    background: -webkit-linear-gradient(0deg, #c9c45e, #e9c45e);
    background: linear-gradient(90deg, #c9c45e, #e9c45e);
    width: 60px;
    height: 60px;
    border-radius: 100%;
    margin: 105px auto;
    position: absolute;
    left: 0;
    right: 0;
}
.mercury {
    background: #453217;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    margin-top: 10px;
}
.venus {
    background: #ac6339;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    margin-top: 30px;
}
.earth {
    background: #3e8ebb;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    margin-top: 70px;
}
.mars {
    background: #6f3125;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    margin-top: 110px;
}
.jupiter {
    background: #3d2c14;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    margin-top: 160px;
}
.saturn {
    background: #e97340;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    margin-top: 200px;
}
.uranus {
    background: #379;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    margin-top: 250px;
}
.neptune {
    background: #6acdc0;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    margin-top: 290px;
}
.pluto {
    background: #c6c053;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    margin-top: 340px;
}
[class*="-orbit"] {
    position: absolute;
    left: 0;
    right: 0;
    border: 1px solid #333;
    box-shadow: 0px 1px 1px #4096ee;
    border-radius: 100%;
}
.mercurys-orbit {
    width: 100px;
    height: 100px;
    margin: 85px auto;
    -webkit-animation: gravity 0.60057s linear infinite;
    animation: gravity 0.60057s linear infinite;
}
.venus-orbit {
    width: 170px;
    height: 170px;
    margin: 50px auto;
    -webkit-animation: gravity 3.3365s linear infinite;
    animation: gravity 3.3365s linear infinite;
}
.earths-orbit {
    width: 270px;
    height: 270px;
    margin: 0px auto;
    -webkit-animation: gravity 6.673s linear infinite;
    animation: gravity 6.673s linear infinite;
}
.mars-orbit {
    width: 370px;
    height: 370px;
    margin: -50px auto;
    -webkit-animation: gravity 10.0095s linear infinite;
    animation: gravity 10.0095s linear infinite;
}
.jupiters-orbit {
    width: 470px;
    height: 470px;
    margin: -100px auto;
    -webkit-animation: gravity 13.346s linear infinite;
    animation: gravity 13.346s linear infinite;
}
.saturns-orbit {
    width: 570px;
    height: 570px;
    margin: -150px auto;
    -webkit-animation: gravity 20.019s linear infinite;
    animation: gravity 20.019s linear infinite;
}
.uranus-orbit {
    width: 670px;
    height: 670px;
    margin: -200px auto;
    -webkit-animation: gravity 26.692s linear infinite;
    animation: gravity 26.692s linear infinite;
}
.neptunes-orbit {
    width: 770px;
    height: 770px;
    margin: -250px auto;
    -webkit-animation: gravity 33.365s linear infinite;
    animation: gravity 33.365s linear infinite;
}
.plutos-orbit {
    width: 870px;
    height: 870px;
    margin: -300px auto;
    margin-left: -50px;
    -webkit-animation: gravity 40.038s linear infinite;
    animation: gravity 40.038s linear infinite;
}
@-webkit-keyframes gravity {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes gravity {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

HTML

使用CSS3 transform: rotate 方法实现。

css3，solar

编辑器支持Emmet

快捷键

使用CSS3 transform: rotate 方法实现。

css3，solar

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：