{"html":"

\n \n

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

\n \n

","css":".orbit {\n float: left;\n width: 100%;\n min-width: 100px;\n min-height: 100px;\n}\n\n.orbit-icon {\n width: 1.6em;\n height: 1.6em;\n line-height: 1.6em;\n font-size: 1.2em;\n border-radius: 50%;\n background: #ccc;\n color: #fff;\n text-align: center;\n display: block;\n}\n\n.orbit-wrap {\n height: 40em;\n list-style: none;\n font-size: 1.3em;\n}\n\n.orbit-wrap > li {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n}\n\n.orbit-wrap > li:hover ul {\n border-width: 2px;\n border-color: #fff;\n}\n\n.orbit-wrap > li:hover ~ li ul {\n border-color: rgba(255, 255, 255, 0.2);\n}\n\n.orbit-wrap > li:hover ~ li ul li {\n opacity: 0.4;\n}\n\nul[class^=ring] {\n transition: all 300ms ease-in-out;\n}\n\nul[class^=ring] li {\n transition: all 300ms ease-in-out;\n}\n\n.ring-0 {\n width: 25em;\n height: 25em;\n animation: clockwiseRotate 35s linear infinite;\n}\n\n.ring-0 i {\n animation: counterClockwiseRotate 35s linear infinite;\n}\n\n.ring-0 > *:nth-of-type(1) {\n transform: rotate(95deg) translate(12.5em) rotate(-95deg);\n}\n\n.ring-0 > *:nth-of-type(2) {\n transform: rotate(190deg) translate(12.5em) rotate(-190deg);\n}\n\n.ring-0 > *:nth-of-type(3) {\n transform: rotate(285deg) translate(12.5em) rotate(-285deg);\n}\n\n.ring-0 > *:nth-of-type(4) {\n transform: rotate(380deg) translate(12.5em) rotate(-380deg);\n}\n\n.ring-1 {\n width: 20em;\n height: 20em;\n animation: clockwiseRotate 30s linear infinite;\n}\n\n.ring-1 i {\n animation: counterClockwiseRotate 30s linear infinite;\n}\n\n.ring-1 > *:nth-of-type(1) {\n transform: rotate(126.6666666667deg) translate(10em) rotate(-126.6666666667deg);\n}\n\n.ring-1 > *:nth-of-type(2) {\n transform: rotate(253.3333333333deg) translate(10em) rotate(-253.3333333333deg);\n}\n\n.ring-1 > *:nth-of-type(3) {\n transform: rotate(380deg) translate(10em) rotate(-380deg);\n}\n\n.ring-2 {\n width: 15em;\n height: 15em;\n animation: clockwiseRotate 25s linear infinite;\n}\n\n.ring-2 i {\n animation: counterClockwiseRotate 25s linear infinite;\n}\n\n.ring-2 > *:nth-of-type(1) {\n transform: rotate(47.5deg) translate(7.5em) rotate(-47.5deg);\n}\n\n.ring-2 > *:nth-of-type(2) {\n transform: rotate(95deg) translate(7.5em) rotate(-95deg);\n}\n\n.ring-2 > *:nth-of-type(3) {\n transform: rotate(142.5deg) translate(7.5em) rotate(-142.5deg);\n}\n\n.ring-2 > *:nth-of-type(4) {\n transform: rotate(190deg) translate(7.5em) rotate(-190deg);\n}\n\n.ring-2 > *:nth-of-type(5) {\n transform: rotate(237.5deg) translate(7.5em) rotate(-237.5deg);\n}\n\n.ring-2 > *:nth-of-type(6) {\n transform: rotate(285deg) translate(7.5em) rotate(-285deg);\n}\n\n.ring-2 > *:nth-of-type(7) {\n transform: rotate(332.5deg) translate(7.5em) rotate(-332.5deg);\n}\n\n.ring-2 > *:nth-of-type(8) {\n transform: rotate(380deg) translate(7.5em) rotate(-380deg);\n}\n\n.ring-3 {\n width: 10em;\n height: 10em;\n animation: clockwiseRotate 20s linear infinite;\n}\n\n.ring-3 i {\n animation: counterClockwiseRotate 20s linear infinite;\n}\n\n.ring-3 > *:nth-of-type(1) {\n transform: rotate(126.6666666667deg) translate(5em) rotate(-126.6666666667deg);\n}\n\n.ring-3 > *:nth-of-type(2) {\n transform: rotate(253.3333333333deg) translate(5em) rotate(-253.3333333333deg);\n}\n\n.ring-3 > *:nth-of-type(3) {\n transform: rotate(380deg) translate(5em) rotate(-380deg);\n}\n\nul[class^=ring] {\n border: solid 1px rgba(33, 150, 243, 0.8);\n position: relative;\n padding: 0;\n border-radius: 50%;\n list-style: none;\n box-sizing: content-box;\n}\n\nul[class^=ring] li {\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n width: 1.6em;\n height: 1.6em;\n margin: -0.8em;\n}\n/*\n center;\n */\n.orbit-center {\n z-index: 5;\n font-size: 2em;\n width: 1.8em;\n height: 1.8em;\n line-height: 1.8em;\n text-align: center;\n background: hotpink;\n border-radius: 50%;\n}\n\n.orbit-center:hover .orbit-center__icon {\n transform: rotateZ(0deg);\n}\n\n.orbit-center__icon {\n transform: rotateZ(-360deg);\n transition: all 300ms ease-in-out;\n}\n\n.orbit-wrap > li.orbit-center:hover ~ li > ul {\n width: 0;\n height: 0;\n}\n\n.orbit-wrap > li.orbit-center:hover ~ li > ul * {\n transform: translate(0, 0);\n}\n/* \n animations \n */\n@keyframes clockwiseRotate {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes counterClockwiseRotate {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(-360deg);\n }\n}\n/* \n icons \n */\n.fa-heart-o {\n background: #b71c1c;\n color: white;\n}\n\n.fa-coffee {\n background: #4CAF50;\n color: #CDDC39;\n}\n\n.fa-safari {\n background: white;\n color: darkslateblue;\n}\n\n.fa-firefox {\n background: #1565c0;\n color: #ff8f00;\n}\n\n.fa-chrome {\n background: #fbc02d;\n color: #ef6c00;\n}\n\n.fa-edge {\n background: #03a9f4;\n color: white;\n}\n\n.fa-android {\n background: snow;\n color: limegreen;\n}\n\n.fa-apple {\n background: #444;\n color: white;\n}\n\n.fa-linux {\n background: white;\n color: #222;\n}\n\n.fa-windows {\n background: white;\n color: #03a9f4;\n}\n\n.fa-terminal {\n background: #222;\n color: #fff;\n}\n\n.fa-html5 {\n background: white;\n color: #e65100;\n}\n\n.fa-css3 {\n background: white;\n color: #2196f3;\n}\n\n.fa-git {\n background: #222;\n color: white;\n}\n\n.fa-free-code-camp {\n background: green;\n color: white;\n}\n\n.fa-meetup {\n background: red;\n color: white;\n}\n\n.fa-podcast {\n background: red;\n color: white;\n}\n\n.fa-codepen {\n background: #333;\n color: white;\n}\n\n\n"}

hard-sheep-18

👁 实时预览

📝 源代码