{"html":"

\n \n

\n","css":".loader {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.loader span {\n position: relative;\n width: 250px;\n height: 250px;\n background-color: #eaeef0;\n border: 6px solid #eaeef0;\n box-shadow:\n -8px -8px 15px rgba(255, 255, 255, 1),\n 8px 8px 25px rgba(0, 0, 0, 0.15);\n border-radius: 50%;\n overflow: hidden;\n}\n\n.loader span:before {\n content: \"LOADING\";\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 900;\n color: #bbb9b9;\n letter-spacing: 3px;\n font-size: 23px;\n position: absolute;\n inset: 40px;\n background-color: #eaeef0;\n box-shadow:\n -8px -8px 25px rgba(255, 255, 255, 1),\n 8px 8px 25px rgba(0, 0, 0, 0.15),\n inset 3px 3px 10px rgba(0, 0, 0, 0.1),\n inset -1px -1px 15px rgba(255, 255, 255, 1);\n border: 2px solid #eaeef0;\n border-radius: 50%;\n z-index: 1;\n}\n\n.loader span i {\n position: absolute;\n inset: 0;\n background: linear-gradient(#42abff, #ff4f8b, #ffeb4b);\n border-radius: 50%;\n filter: blur(5px);\n animation: animate 1s linear infinite;\n}\n\n@keyframes animate {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.text {\n position: absolute;\n width: 279px;\n height: 279px;\n border-radius: 50%;\n animation: animateText 6s linear infinite;\n}\n\n@keyframes animateText {\n 0% {\n transform: rotate(360deg);\n }\n\n 100% {\n transform: rotate(0deg);\n }\n}\n\n.ball {\n width: 50px;\n height: 50px;\n background: linear-gradient(#42abff, #ff4f8b, #ffeb4b);\n border: 6px solid #dfdfdf;\n border-radius: 50%;\n box-shadow:\n -8px -8px 15px rgba(255, 255, 255, 1),\n 8px 8px 25px rgba(0, 0, 0, 0.15);\n animation: rotate 3s infinite linear;\n}\n"}

ugly-dog-72

👁 实时预览

📝 源代码