{"html":"\n","css":".container-loader {\n width: 130px;\n height: 130px;\n position: relative;\n\n @media (width <= 1111px) {\n zoom: 0.55;\n }\n\n .aro {\n width: 100%;\n height: 100%;\n border: 3px solid currentColor;\n position: absolute;\n top: 0;\n border-radius: 50%;\n transition: filter 0.5s ease;\n animation: mover 4s alternate infinite both;\n animation-delay: calc(var(--d) * -0.04s);\n\n &:nth-child(n + 1):nth-child(-n + 5) {\n color: #ff5733;\n }\n\n &:nth-child(n + 6):nth-child(-n + 10) {\n color: #33ff57;\n }\n\n &:nth-child(n + 11):nth-child(-n + 15) {\n color: #3357ff;\n }\n\n &:nth-child(n + 16):nth-child(-n + 20) {\n color: #9d80cb;\n }\n\n &:nth-child(n + 21):nth-child(-n + 25) {\n color: #33fff5;\n }\n\n &:nth-child(n + 26):nth-child(-n + 30) {\n color: #f5ff33;\n }\n\n &:nth-child(n + 31):nth-child(-n + 35) {\n color: #ff8c33;\n }\n\n &:nth-child(n + 36):nth-child(-n + 40) {\n color: #8c33ff;\n }\n\n &:nth-child(n + 41):nth-child(-n + 45) {\n color: #33ff8c;\n }\n\n &:nth-child(n + 46):nth-child(-n + 50) {\n color: #ff3380;\n }\n }\n\n &:hover {\n .aro {\n filter: saturate(500%);\n color: white;\n }\n }\n}\n\n@keyframes mover {\n 0%,\n 100% {\n left: -150%;\n top: -150%;\n }\n 25% {\n left: 150%;\n }\n 50% {\n top: 50%;\n }\n 75% {\n left: -150%;\n }\n}\n"}

average-dog-4

👁 实时预览

📝 源代码