{"html":"

\n","css":".spinner-container {\n position: relative;\n width: 100px;\n height: 100px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n}\n\n.spinner-inner {\n position: relative;\n width: 60px;\n height: 60px;\n border-radius: 50%;\n box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.2), -10px -10px 20px 0px rgba(255, 255, 255, 0.5);\n}\n\n.spinner-outer {\n position: relative;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n box-shadow: -10px -10px 20px 0px rgba(255, 255, 255, 0.5), 10px 10px 20px 0px rgba(0, 0, 0, 0.2);\n animation: spinner-rotate_51023 2s ease infinite;\n}\n\n.spinner-inner-1 {\n position: absolute;\n top: 10px;\n left: 10px;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background-color: rgba(0, 0, 0, 0.2);\n box-shadow: 10px 10px 20px 0px rgba(0, 0, 0\n 0.2), -10px -10px 20px 0px rgba(255, 255, 255, 0.5);\n z-index: 10;\n animation: spinner-rotate_51023 2s ease infinite;\n}\n\n.spinner-inner-2 {\n position: absolute;\n top: 10px;\n right: 10px;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background-color: rgba(0, 0, 0, 0.2);\n box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.2), -10px -10px 20px 0px rgba(255, 255, 255, 0.5);\n z-index: 10;\n animation: spinner-rotate_51023 2s ease infinite;\n}\n\n.spinner-inner-3 {\n position: absolute;\n bottom: 10px;\n left: 10px;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background-color: rgba(0, 0, 0, 0.2);\n box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.2), -10px -10px 20px 0px rgba(255, 255, 255, 0.5);\n z-index: 10;\n animation: spinner-rotate_51023 2s ease infinite;\n}\n\n.spinner-inner-4 {\n position: absolute;\n bottom: 10px;\n right: 10px;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background-color: rgba(0, 0, 0, 0.2);\n box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.2), -10px -10px 20px 0px rgba(255, 255, 255, 0.5);\n z-index: 10;\n animation: spinner-rotate_51023 2s ease infinite;\n}\n\n@keyframes spinner-rotate_51023 {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}"}

silent-deer-42

👁 实时预览

📝 源代码