纯CSS3实现的太阳系

Sistema Solar in Pure CSS3

css3, solar

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1537
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@charset "UTF-8";
@import url("http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");
*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html,
html body {
    height: 100%;
}
html body {
    background-color: #2c3e50;
    overflow: hidden;
}
ul {
    list-style-type: none;
}
i {
    display: block;
    font-style: normal;
    text-indent: -99999px;
    /* ============================================================
   Sistema Solar (Solar System)
   ============================================================ */
}
.sistema {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-transform: scale(0.83);
    -moz-transform: scale(0.83);
    -ms-transform: scale(0.83);
    -o-transform: scale(0.83);
    transform: scale(0.83);
}
.orbita {
    border: 1px solid rgba(62, 87, 113, 0.5);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.orbita:hover {
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border: 1px solid rgba(35, 49, 64, 0.5);
}
.astro {
    position: absolute;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.astro.planeta {
    left: 50%;
}
.sol {
    width: 50px;
    height: 50px;
    background-color: #f1c40f;
    -webkit-animation: luz-sol 3s linear infinite alternate;
    animation: luz-sol 3s linear infinite alternate;
}
@-webkit-keyframes luz-sol {
    from {
        -webkit-box-shadow: 0 0 50px rgba(241, 196, 15, 0.5), 0 0 35px rgba(230, 126, 34, 0.5), inset 0 0 5px #e74c3c;
        -moz-box-shadow: 0 0 50px rgba(241, 196, 15, 0.5), 0 0 35px rgba(230, 126, 34, 0.5), inset 0 0 5px #e74c3c;
        box-shadow: 0 0 50px rgba(241, 196, 15, 0.5), 0 0 35px rgba(230, 126, 34, 0.5), inset 0 0 5px #e74c3c;
    }
    to {
        -webkit-box-shadow: 0 0 150px 20px rgba(241, 196, 15, 0.5), 0 0 160px rgba(230, 126, 34, 0.5), inset 0 0 20px #e74c3c;
        -moz-box-shadow: 0 0 150px 20px rgba(241, 196, 15, 0.5), 0 0 160px rgba(230, 126, 34, 0.5), inset 0 0 20px #e74c3c;
        box-shadow: 0 0 150px 20px rgba(241, 196, 15, 0.5), 0 0 160px rgba(230, 126, 34, 0.5), inset 0 0 20px #e74c3c;
    }
}
@keyframes luz-sol {
    /* ==============================
   Sistema Solar | Planetas (planets)
   ============================== */
    /* Mercúrio */
    
    from {
        -webkit-box-shadow: 0 0 50px rgba(241, 196, 15, 0.5), 0 0 35px rgba(230, 126, 34, 0.5), inset 0 0 5px #e74c3c;
        -moz-box-shadow: 0 0 50px rgba(241, 196, 15, 0.5), 0 0 35px rgba(230, 126, 34, 0.5), inset 0 0 5px #e74c3c;
        box-shadow: 0 0 50px rgba(241, 196, 15, 0.5), 0 0 35px rgba(230, 126, 34, 0.5), inset 0 0 5px #e74c3c;
    }
    to {
        -webkit-box-shadow: 0 0 150px 20px rgba(241, 196, 15, 0.5), 0 0 160px rgba(230, 126, 34, 0.5), inset 0 0 20px #e74c3c;
        -moz-box-shadow: 0 0 150px 20px rgba(241, 196, 15, 0.5), 0 0 160px rgba(230, 126, 34, 0.5), inset 0 0 20px #e74c3c;
        box-shadow: 0 0 150px 20px rgba(241, 196, 15, 0.5), 0 0 160px rgba(230, 126, 34, 0.5), inset 0 0 20px #e74c3c;
    }
}
.orbita:nth-child(10) {
    width: 80px;
    height: 80px;
}
.orbita:nth-child(10) .mercurio {
    width: 5px;
    height: 5px;
    background-color: #bdc3c7;
    -webkit-box-shadow: inset 0 0 10px #95a5a6;
    -moz-box-shadow: inset 0 0 10px #95a5a6;
    box-shadow: inset 0 0 10px #95a5a6;
    -webkit-transition: all 5s linear;
    -moz-transition: all 5s linear;
    -o-transition: all 5s linear;
    transition: all 5s linear;
}
li:nth-child(10) {
    -webkit-animation: orbita-mercurio 5s linear infinite;
    animation: orbita-mercurio 5s linear infinite;
}
@-webkit-keyframes orbita-mercurio {
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(0);
        -moz-transform: translate(-50%, -50%) rotate(0);
        -ms-transform: translate(-50%, -50%) rotate(0);
        -o-transform: translate(-50%, -50%) rotate(0);
        transform: translate(-50%, -50%) rotate(0);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        -moz-transform: translate(-50%, -50%) rotate(360deg);
        -ms-transform: translate(-50%, -50%) rotate(360deg);
        -o-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
@keyframes orbita-mercurio {
    /* Vênus */
    
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(0);
        -moz-transform: translate(-50%, -50%) rotate(0);
        -ms-transform: translate(-50%, -50%) rotate(0);
        -o-transform: translate(-50%, -50%) rotate(0);
        transform: translate(-50%, -50%) rotate(0);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        -moz-transform: translate(-50%, -50%) rotate(360deg);
        -ms-transform: translate(-50%, -50%) rotate(360deg);
        -o-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
.orbita:nth-child(9) {
    width: 130px;
    height: 130px;
}
.orbita:nth-child(9) .venus {
    width: 15px;
    height: 15px;
    background-color: #e16620;
    -webkit-box-shadow: inset 0 0 10px #e1a940;
    -moz-box-shadow: inset 0 0 10px #e1a940;
    box-shadow: inset 0 0 10px #e1a940;
    background-color: rgba(137, 61, 18, 0.5) 30%, rgba(237, 164, 122, 0.5) 60%, rgba(225, 102, 32, 0.5) 90%;
    background-image: -webkit-linear-gradient(to bottom, rgba(137, 61, 18, 0.5) 30%, rgba(237, 164, 122, 0.5) 60%, rgba(225, 102, 32, 0.5) 90%);
    background-image: -moz-linear-gradient(to bottom, rgba(137, 61, 18, 0.5) 30%, rgba(237, 164, 122, 0.5) 60%, rgba(225, 102, 32, 0.5) 90%);
    background-image: -ms-linear-gradient(to bottom, rgba(137, 61, 18, 0.5) 30%, rgba(237, 164, 122, 0.5) 60%, rgba(225, 102, 32, 0.5) 90%);
    background-image: -o-linear-gradient(to bottom, rgba(137, 61, 18, 0.5) 30%, rgba(237, 164, 122, 0.5) 60%, rgba(225, 102, 32, 0.5) 90%);
    background-image: linear-gradient(to bottom, rgba(137, 61, 18, 0.5) 30%, rgba(237, 164, 122, 0.5) 60%, rgba(225, 102, 32, 0.5) 90%);
}
li:nth-child(9) {
    -webkit-animation: orbita-venus 12.78409s linear infinite;
    animation: orbita-venus 12.78409s linear infinite;
}
@-webkit-keyframes orbita-venus {
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(0);
        -moz-transform: translate(-50%, -50%) rotate(0);
        -ms-transform: translate(-50%, -50%) rotate(0);
        -o-transform: translate(-50%, -50%) rotate(0);
        transform: translate(-50%, -50%) rotate(0);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        -moz-transform: translate(-50%, -50%) rotate(360deg);
        -ms-transform: translate(-50%, -50%) rotate(360deg);
        -o-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
@keyframes orbita-venus {
    /* Terra */
    
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(0);
        -moz-transform: translate(-50%, -50%) rotate(0);
        -ms-transform: translate(-50%, -50%) rotate(0);
        -o-transform: translate(-50%, -50%) rotate(0);
        transform: translate(-50%, -50%) rotate(0);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        -moz-transform: translate(-50%, -50%) rotate(360deg);
        -ms-transform: translate(-50%, -50%) rotate(360deg);
        -o-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
.orbita:nth-child(8) {
    width: 190px;
    height: 190px;
}
.orbita:nth-child(8) .terra {
    width: 20px;
    height: 20px;
    background-color: #17bf7d;
}
.orbita:nth-child(8) .terra::before {
    content: "\f0ac";
    font-family: "FontAwesome";
    color: #2a6cbd;
    display: block;
    font-size: 25px;
    text-indent: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
li:nth-child(8) {
    -webkit-animation: orbita-terra 20.73864s linear infinite;
    animation: orbita-terra 20.73864s linear infinite;
}
@-webkit-keyframes orbita-terra {
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(0);
        -moz-transform: translate(-50%, -50%) rotate(0);
        -ms-transform: translate(-50%, -50%) rotate(0);
        -o-transform: translate(-50%, -50%) rotate(0);
        transform: translate(-50%, -50%) rotate(0);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        -moz-transform: translate(-50%, -50%) rotate(360deg);
        -ms-transform: translate(-50%, -50%) rotate(360deg);
        -o-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
@keyframes orbita-terra {
    /* Marte */
    
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(0);
        -moz-transform: translate(-50%, -50%) rotate(0);
        -ms-transform: translate(-50%, -50%) rotate(0);
        -o-transform: translate(-50%, -50%) rotate(0);
        transform: translate(-50%, -50%) rotate(0);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        -moz-transform: translate(-50%, -50%) rotate(360deg);
        -ms-transform: translate(-50%, -50%) rotate(360deg);
        -o-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
.orbita:nth-child(7) {
    width: 240px;
    height: 240px;
}
.orbita:nth-child(7) .marte {
    width: 15px;
    height: 15px;
    background-color: #e74c3c;
    background-color: #e43725 20%, #d62c1a 40%, #e43725 60%, #d62c1a 80%, #e43725 100%;
    background-image: -webkit-linear-gradient(0, #e43725 20%, #d62c1a 40%, #e43725 60%, #d62c1a 80%, #e43725 100%);
    background-image: -moz-linear-gradient(0, #e43725 20%, #d62c1a 40%, #e43725 60%, #d62c1a 80%, #e43725 100%);
    background-image: -ms-linear-gradient(0, #e43725 20%, #d62c1a 40%, #e43725 60%, #d62c1a 80%, #e43725 100%);
    background-image: -o-linear-gradient(0, #e43725 20%, #d62c1a 40%, #e43725 60%, #d62c1a 80%, #e43725 100%);
    background-image: linear-gradient(0, #e43725 20%, #d62c1a 40%, #e43725 60%, #d62c1a 80%, #e43725 100%);
}
li:nth-child(7) {
    -webkit-animation: orbita-marte 39.03409s linear infinite;
    animation: orbita-marte 39.03409s linear infinite;
}
@-webkit-keyframes orbita-marte {
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(0);
        -moz-transform: translate(-50%, -50%) rotate(0);
        -ms-transform: translate(-50%, -50%) rotate(0);
        -o-transform: translate(-50%, -50%) rotate(0);
        transform: translate(-50%, -50%) rotate(0);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        -moz-transform: translate(-50%, -50%) rotate(360deg);
        -ms-transform: translate(-50%, -50%) rotate(360deg);
        -o-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
@keyframes orbita-marte {
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(0);
        -moz-transform: translate(-50%, -50%) rotate(0);
        -ms-transform: translate(-50%, -50%) rotate(0);
        -o-transform: translate(-50%, -50%) rotate(0);
        transform: translate(-50%, -50%) rotate(0);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        -moz-transform: translate(-50%, -50%) rotate(360deg);
        -ms-transform: translate(-50%, -50%) rotate(360deg);
        -o-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
.orbita:nth-child(6) {
    width: 300px;
    height: 300px;
    border-width: 5px;
    border-style: dotted;
    text-indent: -99999px;
    /* Júpiter */
}
.orbita:nth-child(5) {
    width: 400px;
    height: 400px;
}
.orbita:nth-child(5) .jupiter {
    width: 70px;
    height: 70px;
    background-color: #a38671;
    -webkit-box-shadow: inset -3px 3px 3px rgba(255, 255, 255, 0.3);
    -moz-box-shadow: inset -3px 3px 3px rgba(255, 255, 255, 0.3);
    box-shadow: inset -3px 3px 3px rgba(255, 255, 255, 0.3);
    background-color: #a38671 5%, #987962 15%, #ad9380 20%, #987962 25%, #a38671 30%, #ad9380 45%, #a38671 50%, #987962 60%, #ad9380 65%, #987962 70%, #a38671 75%, #ad9380 85%, #a38671 90%;
    background-image: -webkit-linear-gradient(45deg, #a38671 5%, #987962 15%, #ad9380 20%, #987962 25%, #a38671 30%, #ad9380 45%, #a38671 50%, #987962 60%, #ad9380 65%, #987962 70%, #a38671 75%, #ad9380 85%, #a38671 90%);
    background-image: -moz-linear-gradient(45deg, #a38671 5%, #987962 15%, #ad9380 20%, #987962 25%, #a38671 30%, #ad9380 45%, #a38671 50%, #987962 60%, #ad9380 65%, #987962 70%, #a38671 75%, #ad9380 85%, #a38671 90%);
    background-image: -ms-linear-gradient(45deg, #a38671 5%, #987962 15%, #ad9380 20%, #987962 25%, #a38671 30%, #ad9380 45%, #a38671 50%, #987962 60%, #ad9380 65%, #987962 70%, #a38671 75%, #ad9380 85%, #a38671 90%);
    background-image: -o-linear-gradient(45deg, #a38671 5%, #987962 15%, #ad9380 20%, #987962 25%, #a38671 30%, #ad9380 45%, #a38671 50%, #987962 60%, #ad9380 65%, #987962 70%, #a38671 75%, #ad9380 85%, #a38671 90%);
    background-image: linear-gradient(45deg, #a38671 5%, #987962 15%, #ad9380 20%, #987962 25%, #a38671 30%, #ad9380 45%, #a38671 50%, #987962 60%, #ad9380 65%, #987962 70%, #a38671 75%, #ad9380 85%, #a38671 90%);
}
li:nth-child(5) {
    -webkit-animation: orbita-jupiter 246.02273s linear infinite;
    animation: orbita-jupiter 246.02273s linear infinite;
}
@-webkit-keyframes orbita-jupiter {
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(0);
        -moz-transform: translate(-50%, -50%) rotate(0);
        -ms-transform: translate(-50%, -50%) rotate(0);
        -o-transform: translate(-50%, -50%) rotate(0);
        transform: translate(-50%, -50%) rotate(0);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        -moz-transform: translate(-50%, -50%) rotate(360deg);
        -ms-transform: translate(-50%, -50%) rotate(360deg);
        -o-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
@keyframes orbita-jupiter {
    /* Saturno */
    
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(0);
        -moz-transform: translate(-50%, -50%) rotate(0);
        -ms-transform: translate(-50%, -50%) rotate(0);
        -o-transform: translate(-50%, -50%) rotate(0);
        transform: translate(-50%, -50%) rotate(0);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        -moz-transform: translate(-50%, -50%) rotate(360deg);
        -ms-transform: translate(-50%, -50%) rotate(360deg);
        -o-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
.orbita:nth-child(4) {
    width: 550px;
    height: 550px;
}
.orbita:nth-child(4) .saturno {
    width: 45px;
    height: 45px;
    background-color: #a38671;
    -webkit-box-shadow: inset -3px 3px 3px -2px rgba(255, 255, 255, 0.3);
    -moz-box-shadow: inset -3px 3px 3px -2px rgba(255, 255, 255, 0.3);
    box-shadow: inset -3px 3px 3px -2px rgba(255, 255, 255, 0.3);
    background-color: #a38671 5%, #987962 15%, #ad9380 20%, #987962 25%, #a38671 30%, #ad9380 45%, #a38671 50%, #987962 60%, #ad9380 65%, #987962 70%, #a38671 75%, #ad9380 85%, #a38671 90%;
    background-image: -webkit-linear-gradient(0, #a38671 5%, #987962 15%, #ad9380 20%, #987962 25%, #a38671 30%, #ad9380 45%, #a38671 50%, #987962 60%, #ad9380 65%, #987962 70%, #a38671 75%, #ad9380 85%, #a38671 90%);
    background-image: -moz-linear-gradient(0, #a38671 5%, #987962 15%, #ad9380 20%, #987962 25%, #a38671 30%, #ad9380 45%, #a38671 50%, #987962 60%, #ad9380 65%, #987962 70%, #a38671 75%, #ad9380 85%, #a38671 90%);
    background-image: -ms-linear-gradient(0, #a38671 5%, #987962 15%, #ad9380 20%, #987962 25%, #a38671 30%, #ad9380 45%, #a38671 50%, #987962 60%, #ad9380 65%, #987962 70%, #a38671 75%, #ad9380 85%, #a38671 90%);
    background-image: -o-linear-gradient(0, #a38671 5%, #987962 15%, #ad9380 20%, #987962 25%, #a38671 30%, #ad9380 45%, #a38671 50%, #987962 60%, #ad9380 65%, #987962 70%, #a38671 75%, #ad9380 85%, #a38671 90%);
    background-image: linear-gradient(0, #a38671 5%, #987962 15%, #ad9380 20%, #987962 25%, #a38671 30%, #ad9380 45%, #a38671 50%, #987962 60%, #ad9380 65%, #987962 70%, #a38671 75%, #ad9380 85%, #a38671 90%);
}
.orbita:nth-child(4) .saturno::before {
    content: " ";
    display: block;
    width: 65px;
    height: 65px;
    border: 5px double #a09382;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
li:nth-child(4) {
    -webkit-animation: orbita-saturno 611.36364s linear infinite;
    animation: orbita-saturno 611.36364s linear infinite;
}
@-webkit-keyframes orbita-saturno {
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(0);
        -moz-transform: translate(-50%, -50%) rotate(0);
        -ms-transform: translate(-50%, -50%) rotate(0);
        -o-transform: translate(-50%, -50%) rotate(0);
        transform: translate(-50%, -50%) rotate(0);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        -moz-transform: translate(-50%, -50%) rotate(360deg);
        -ms-transform: translate(-50%, -50%) rotate(360deg);
        -o-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
@keyframes orbita-saturno {
    /* Urano */
    
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(0);
        -moz-transform: translate(-50%, -50%) rotate(0);
        -ms-transform: translate(-50%, -50%) rotate(0);
        -o-transform: translate(-50%, -50%) rotate(0);
        transform: translate(-50%, -50%) rotate(0);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        -moz-transform: translate(-50%, -50%) rotate(360deg);
        -ms-transform: translate(-50%, -50%) rotate(360deg);
        -o-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
.orbita:nth-child(3) {
    width: 660px;
    height: 660px;
}
.orbita:nth-child(3) .urano {
    width: 20px;
    height: 20px;
    background-color: #cff5f6;
    -webkit-box-shadow: inset 0 0 10px #799ba4;
    -moz-box-shadow: inset 0 0 10px #799ba4;
    box-shadow: inset 0 0 10px #799ba4;
}
li:nth-child(3) {
    -webkit-animation: orbita-urano 1750s linear infinite;
    animation: orbita-urano 1750s linear infinite;
}
@-webkit-keyframes orbita-urano {
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(0);
        -moz-transform: translate(-50%, -50%) rotate(0);
        -ms-transform: translate(-50%, -50%) rotate(0);
        -o-transform: translate(-50%, -50%) rotate(0);
        transform: translate(-50%, -50%) rotate(0);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        -moz-transform: translate(-50%, -50%) rotate(360deg);
        -ms-transform: translate(-50%, -50%) rotate(360deg);
        -o-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
@keyframes orbita-urano {
    /* Netuno */
    
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(0);
        -moz-transform: translate(-50%, -50%) rotate(0);
        -ms-transform: translate(-50%, -50%) rotate(0);
        -o-transform: translate(-50%, -50%) rotate(0);
        transform: translate(-50%, -50%) rotate(0);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        -moz-transform: translate(-50%, -50%) rotate(360deg);
        -ms-transform: translate(-50%, -50%) rotate(360deg);
        -o-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
.orbita:nth-child(2) {
    width: 720px;
    height: 720px;
}
.orbita:nth-child(2) .netuno {
    width: 20px;
    height: 20px;
    background-color: #2a6cbd;
    -webkit-box-shadow: inset 0 0 10px #6ea1df;
    -moz-box-shadow: inset 0 0 10px #6ea1df;
    box-shadow: inset 0 0 10px #6ea1df;
}
li:nth-child(2) {
    -webkit-animation: orbita-netuno 3419.88636s linear infinite;
    animation: orbita-netuno 3419.88636s linear infinite;
}
@-webkit-keyframes orbita-netuno {
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(0);
        -moz-transform: translate(-50%, -50%) rotate(0);
        -ms-transform: translate(-50%, -50%) rotate(0);
        -o-transform: translate(-50%, -50%) rotate(0);
        transform: translate(-50%, -50%) rotate(0);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        -moz-transform: translate(-50%, -50%) rotate(360deg);
        -ms-transform: translate(-50%, -50%) rotate(360deg);
        -o-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
@keyframes orbita-netuno {
    /* Plutao */
    
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(0);
        -moz-transform: translate(-50%, -50%) rotate(0);
        -ms-transform: translate(-50%, -50%) rotate(0);
        -o-transform: translate(-50%, -50%) rotate(0);
        transform: translate(-50%, -50%) rotate(0);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        -moz-transform: translate(-50%, -50%) rotate(360deg);
        -ms-transform: translate(-50%, -50%) rotate(360deg);
        -o-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
.orbita:nth-child(1) {
    width: 760px;
    height: 760px;
}
.orbita:nth-child(1) .plutao {
    width: 5px;
    height: 5px;
    background-color: #880;
}
li:nth-child(1) {
    -webkit-animation: orbita-plutao 5148.52273s linear infinite;
    animation: orbita-plutao 5148.52273s linear infinite;
}
@-webkit-keyframes orbita-plutao {
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(0);
        -moz-transform: translate(-50%, -50%) rotate(0);
        -ms-transform: translate(-50%, -50%) rotate(0);
        -o-transform: translate(-50%, -50%) rotate(0);
        transform: translate(-50%, -50%) rotate(0);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        -moz-transform: translate(-50%, -50%) rotate(360deg);
        -ms-transform: translate(-50%, -50%) rotate(360deg);
        -o-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
@keyframes orbita-plutao {
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(0);
        -moz-transform: translate(-50%, -50%) rotate(0);
        -ms-transform: translate(-50%, -50%) rotate(0);
        -o-transform: translate(-50%, -50%) rotate(0);
        transform: translate(-50%, -50%) rotate(0);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        -moz-transform: translate(-50%, -50%) rotate(360deg);
        -ms-transform: translate(-50%, -50%) rotate(360deg);
        -o-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

HTML

Sistema Solar in Pure CSS3

css3, solar

编辑器支持Emmet

快捷键

Sistema Solar in Pure CSS3

css3, solar

纯CSS实现的太阳火焰

纯CSS3实现的3D风扇动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：