{"html":"

\n \n \n \n \n \n \n \n \n \n

\n","css":".solar {\n margin: 250px auto 350px;\n height: 50px;\n width: 50px;\n background: orange;\n border-radius: 25px;\n position: relative;\n -webkit-animation: glow 1.5s linear infinite;\n -moz-animation: glow 1.5s linear infinite;\n}\n.solar i {\n border-radius: 250px;\n display: block;\n position: absolute;\n border: 1px solid rgba(255, 255, 255, 0.15);\n box-sizing: border-box;\n -moz-box-sizing: border-box;\n -webkit-transform-origin: 50% 50%;\n -moz-transform-origin: 50% 50%;\n}\n.solar i:before {\n content: \"\";\n border-radius: 25px;\n background: black;\n display: block;\n position: absolute;\n top: -5px;\n right: 45%;\n}\n.solar i.mercury {\n width: 80px;\n height: 80px;\n margin-left: -40px;\n left: 50%;\n top: 50%;\n margin-top: -40px;\n -webkit-animation: orbit 0.5s linear infinite;\n -moz-animation: orbit 0.5s linear infinite;\n}\n.solar i.mercury:before {\n background: #6f5f5f;\n height: 7px;\n width: 7px;\n}\n.solar i.venus {\n width: 110px;\n height: 110px;\n margin-left: -55px;\n left: 50%;\n top: 50%;\n margin-top: -55px;\n -webkit-animation: orbit 1s linear infinite;\n -moz-animation: orbit 1s linear infinite;\n}\n.solar i.venus:before {\n background: #e7a71f;\n height: 10px;\n width: 10px;\n}\n.solar i.earth {\n width: 140px;\n height: 140px;\n margin-left: -70px;\n left: 50%;\n top: 50%;\n margin-top: -70px;\n -webkit-animation: orbit 1.5s linear infinite;\n -moz-animation: orbit 1.5s linear infinite;\n}\n.solar i.earth:before {\n background: #63bee2;\n height: 10px;\n width: 10px;\n}\n.solar i.mars {\n width: 170px;\n height: 170px;\n margin-left: -85px;\n left: 50%;\n top: 50%;\n margin-top: -85px;\n -webkit-animation: orbit 2s linear infinite;\n -moz-animation: orbit 2s linear infinite;\n}\n.solar i.mars:before {\n background: red;\n height: 10px;\n width: 10px;\n}\n.solar i.belt {\n box-sizing: border-box;\n -moz-box-sizing: border-box;\n border-width: 25px;\n width: 240px;\n height: 240px;\n margin-left: -120px;\n border-color: rgba(36, 35, 35, 0.21);\n left: 50%;\n top: 50%;\n margin-top: -120px;\n}\n.solar i.jupiter {\n width: 260px;\n height: 260px;\n margin-left: -130px;\n left: 50%;\n top: 50%;\n margin-top: -130px;\n -webkit-animation: orbit 2.5s linear infinite;\n -moz-animation: orbit 2.5s linear infinite;\n}\n.solar i.jupiter:before {\n background: #cf9b2b;\n top: -15px;\n height: 30px;\n width: 30px;\n}\n.solar i.saturn {\n width: 320px;\n height: 320px;\n margin-left: -160px;\n left: 50%;\n top: 50%;\n margin-top: -160px;\n -webkit-animation: orbit 3s linear infinite;\n -moz-animation: orbit 3s linear infinite;\n}\n.solar i.saturn:before {\n background: #cf7a2b;\n top: -10px;\n height: 20px;\n width: 20px;\n}\n.solar i.saturn:after {\n background: #fff;\n width: 30px;\n height: 1px;\n content: \"\";\n position: absolute;\n display: block;\n background: #fff;\n width: 30px;\n height: 1px;\n content: \"\";\n right: 43.5%;\n -webkit-transform: rotate(20deg);\n -moz-transform: rotate(20deg);\n}\n.solar i.uranus {\n width: 360px;\n height: 360px;\n margin-left: -180px;\n left: 50%;\n top: 50%;\n margin-top: -180px;\n -webkit-animation: orbit 3.5s linear infinite;\n -moz-animation: orbit 3.5s linear infinite;\n}\n.solar i.uranus:before {\n background: #10c593;\n top: -8px;\n height: 15px;\n width: 15px;\n}\n.solar i.neptune {\n width: 400px;\n height: 400px;\n margin-left: -200px;\n left: 50%;\n top: 50%;\n margin-top: -200px;\n -webkit-animation: orbit 4s linear infinite;\n -moz-animation: orbit 4s linear infinite;\n}\n.solar i.neptune:before {\n background: #1470e4;\n top: -8px;\n height: 15px;\n width: 15px;\n}\n@-webkit-keyframes orbit {\n 0% {\n -webkit-transform: rotate(0deg);\n }\n 50% {\n -webkit-transform: rotate(-180deg);\n }\n 100% {\n -webkit-transform: rotate(-360deg);\n }\n}\n@-webkit-keyframes glow {\n 0% {\n box-shadow: none;\n }\n 50% {\n background: #ffeb00;\n box-shadow: 0 0 20px orange;\n }\n 100% {\n box-shadow: none;\n }\n}\n@-moz-keyframes orbit {\n 0% {\n -moz-transform: rotate(0deg);\n }\n 50% {\n -moz-transform: rotate(-180deg);\n }\n 100% {\n -moz-transform: rotate(-360deg);\n }\n}\n@-moz-keyframes glow {\n 0% {\n box-shadow: none;\n }\n 50% {\n background: #ffeb00;\n box-shadow: 0 0 20px orange;\n }\n 100% {\n box-shadow: none;\n }\n}\n"}

massive-mouse-92

👁 实时预览

📝 源代码