{"html":"

\n L\n A\n U\n N\n C\n H\n I\n N\n G\n\n

\n\n

\n","css":".loader-wrapper {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100px;\n height: 100px;\n font-family: \"Inter\", sans-serif;\n font-size: 1.2em;\n font-weight: 600;\n color: #fff;\n border-radius: 50%;\n background-color: #f051;\n box-shadow: 0 0 60px -10px #fff5;\n user-select: none;\n}\n\n.loader {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n aspect-ratio: 1 / 1;\n border-radius: 50%;\n background-color: transparent;\n animation: loader-rotate 2s linear infinite;\n z-index: 0;\n}\n\n@keyframes loader-rotate {\n 0% {\n transform: rotate(90deg);\n box-shadow:\n 0 10px 20px 0 #fff inset,\n 0 20px 30px 0 #fff5 inset,\n 0 60px 60px 0 #f001 inset;\n }\n 50% {\n transform: rotate(270deg);\n box-shadow:\n 0 10px 20px 0 #fff inset,\n 0 20px 10px 0 #fa09 inset,\n 0 40px 60px 0 #f002 inset;\n }\n 100% {\n transform: rotate(450deg);\n box-shadow:\n 0 10px 20px 0 #fff inset,\n 0 20px 30px 0 #fff5 inset,\n 0 60px 60px 0 #f001 inset;\n }\n}\n\n.loader-letter {\n display: inline-block;\n opacity: 0.4;\n transform: translateY(0);\n animation: loader-letter-anim 2s infinite;\n z-index: 1;\n border-radius: 50ch;\n border: none;\n filter: blur(2px);\n margin: 0.35em;\n}\n\n.loader-letter:nth-child(1) {\n animation-delay: 0s;\n}\n.loader-letter:nth-child(2) {\n animation-delay: 0.1s;\n}\n.loader-letter:nth-child(3) {\n animation-delay: 0.2s;\n}\n.loader-letter:nth-child(4) {\n animation-delay: 0.3s;\n}\n.loader-letter:nth-child(5) {\n animation-delay: 0.4s;\n}\n.loader-letter:nth-child(6) {\n animation-delay: 0.5s;\n}\n.loader-letter:nth-child(7) {\n animation-delay: 0.6s;\n}\n.loader-letter:nth-child(8) {\n animation-delay: 0.7s;\n}\n.loader-letter:nth-child(9) {\n animation-delay: 0.8s;\n}\n.loader-letter:nth-child(10) {\n animation-delay: 0.9s;\n}\n\n@keyframes loader-letter-anim {\n 0%,\n 100% {\n opacity: 0;\n transform: translateY(0);\n filter: blur(2px);\n }\n 20% {\n opacity: 1;\n transform: scale(1.2) translateY(-1px);\n filter: blur(0px);\n text-shadow:\n 0px 0px 2px #fff,\n 0px 0px 6px #000;\n }\n 40% {\n opacity: 0.7;\n transform: translateY(0);\n filter: blur(2px);\n }\n}\n\n.star {\n position: absolute;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: #fff;\n transform: translate(20px, 90px);\n animation: blur-anim 2s infinite;\n box-shadow: 0 0 8px 0 #fff;\n filter: blur(4px);\n opacity: 0.2;\n}\n\n.star:nth-of-type(2) {\n transform: translate(56px, 46px);\n scale: 1.05;\n animation-delay: 0.2s;\n}\n.star:nth-of-type(3) {\n transform: translate(-26px, 56px);\n scale: 1.4;\n animation-delay: 0.4s;\n}\n.star:nth-of-type(4) {\n transform: translate(-50px, -70px);\n scale: 0.95;\n animation-delay: 0.7s;\n}\n.star:nth-of-type(5) {\n transform: translate(32px, -66px);\n scale: 1.3;\n animation-delay: 0.35s;\n}\n.star:nth-of-type(6) {\n transform: translate(82px, -36px);\n scale: 1;\n animation-delay: 0.9s;\n}\n.star:nth-of-type(7) {\n transform: translate(-92px, 26px);\n scale: 1;\n animation-delay: 0.95s;\n}\n\n@keyframes blur-anim {\n 0%,\n 100% {\n opacity: 0.2;\n filter: blur(4px);\n }\n 50% {\n opacity: 0.3;\n filter: blur(1px);\n }\n}\n"}

popular-puma-86

👁 实时预览

📝 源代码