{"html":"

\n","css":".container {\n position: relative;\n display: flex;\n height: 200px;\n width: 100%;\n justify-content: center;\n align-items: center;\n -webkit-box-reflect: below 0 linear-gradient(transparent, transparent, #0005);\n shape-rendering: crispEdges;\n image-rendering:\n pixelated,\n crisp-edges,\n -moz-crisp-edges;\n}\n\n.loader {\n position: absolute;\n width: 200px;\n height: 200px;\n border-radius: 50%;\n animation: anim 2s linear infinite;\n}\n\n.loader:nth-child(2),\n.loader:nth-child(4) {\n animation-delay: -1s;\n filter: hue-rotate(290deg);\n box-sizing: border-box;\n clear: initial;\n}\n\n@keyframes anim {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.loader:nth-child(1):before,\n.loader:nth-child(2):before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 50%;\n height: 100%;\n background: linear-gradient(to top, transparent, rgba(0, 255, 249, 0.5));\n background-size: 100px 180px;\n background-repeat: no-repeat;\n border-top-left-radius: 100px;\n border-bottom-left-radius: 100px;\n filter: blur(0.65px);\n}\n\ni {\n position: absolute;\n top: 0px;\n left: 50%;\n transform: translateX(-50%);\n width: 20px;\n height: 20px;\n background: #00fff9;\n border-radius: 50%;\n z-index: 10;\n box-shadow:\n 0 0 10px #00fff9,\n 0 0 20px #00fff9,\n 0 0 30px #00fff9,\n 0 0 40px #00fff9,\n 0 0 50px #00fff9,\n 0 0 60px #00fff9,\n 0 0 70px #00fff9,\n 0 0 80px #00fff9,\n 0 0 90px #00fff9,\n 0 0 100px #00fff9;\n filter: blur(5px);\n}\n\n.loader span {\n position: absolute;\n top: 20px;\n left: 20px;\n right: 20px;\n bottom: 20px;\n background: #000;\n border-radius: 50%;\n z-index: 1;\n filter: blur(3.4px);\n box-shadow: 0 0 4px #00fff9;\n}\n"}

grumpy-pig-54

👁 实时预览

📝 源代码