{"html":"

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

\n","css":".loader {\n --size: 250px;\n --duration: 2s;\n --logo-color: grey;\n --background: linear-gradient(\n 0deg,\n rgba(50, 50, 50, 0.2) 0%,\n rgba(100, 100, 100, 0.2) 100%\n );\n height: var(--size);\n aspect-ratio: 1;\n position: relative;\n}\n\n.loader .box {\n position: absolute;\n background: rgba(100, 100, 100, 0.15);\n background: var(--background);\n border-radius: 50%;\n border-top: 1px solid rgba(100, 100, 100, 1);\n box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 10px -0px;\n backdrop-filter: blur(5px);\n animation: ripple var(--duration) infinite ease-in-out;\n}\n\n.loader .box:nth-child(1) {\n inset: 40%;\n z-index: 99;\n}\n\n.loader .box:nth-child(2) {\n inset: 30%;\n z-index: 98;\n border-color: rgba(100, 100, 100, 0.8);\n animation-delay: 0.2s;\n}\n\n.loader .box:nth-child(3) {\n inset: 20%;\n z-index: 97;\n border-color: rgba(100, 100, 100, 0.6);\n animation-delay: 0.4s;\n}\n\n.loader .box:nth-child(4) {\n inset: 10%;\n z-index: 96;\n border-color: rgba(100, 100, 100, 0.4);\n animation-delay: 0.6s;\n}\n\n.loader .box:nth-child(5) {\n inset: 0%;\n z-index: 95;\n border-color: rgba(100, 100, 100, 0.2);\n animation-delay: 0.8s;\n}\n\n.loader .logo {\n position: absolute;\n inset: 0;\n display: grid;\n place-content: center;\n padding: 30%;\n}\n\n.loader .logo svg {\n fill: var(--logo-color);\n width: 100%;\n animation: color-change var(--duration) infinite ease-in-out;\n}\n\n@keyframes ripple {\n 0% {\n transform: scale(1);\n box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 10px -0px;\n }\n 50% {\n transform: scale(1.3);\n box-shadow: rgba(0, 0, 0, 0.3) 0px 30px 20px -0px;\n }\n 100% {\n transform: scale(1);\n box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 10px -0px;\n }\n}\n\n@keyframes color-change {\n 0% {\n fill: var(--logo-color);\n }\n 50% {\n fill: white;\n }\n 100% {\n fill: var(--logo-color);\n }\n}\n"}

tricky-turtle-16

👁 实时预览

📝 源代码

🔗 相关联的样式