{"html":"

\n","css":".loader {\n --main-size: 4em;\n --text-color: #ffffff;\n --shine-color: #ffffff40;\n --shadow-color: #aaaaaa;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n user-select: none;\n position: relative;\n font-size: var(--main-size);\n font-weight: 900;\n text-transform: uppercase;\n color: var(--text-color);\n width: 7.3em;\n height: 1em;\n filter: drop-shadow(0 0 0.05em var(--shine-color));\n}\n\n.loader .text {\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n white-space: nowrap;\n overflow: hidden;\n position: absolute;\n}\n\n.loader .text:nth-child(1) {\n clip-path: polygon(0% 0%, 11.11% 0%, 11.11% 100%, 0% 100%);\n font-size: calc(var(--main-size) / 20);\n margin-left: -2.1em;\n opacity: 0.6;\n}\n\n.loader .text:nth-child(2) {\n clip-path: polygon(11.11% 0%, 22.22% 0%, 22.22% 100%, 11.11% 100%);\n font-size: calc(var(--main-size) / 16);\n margin-left: -0.98em;\n opacity: 0.7;\n}\n\n.loader .text:nth-child(3) {\n clip-path: polygon(22.22% 0%, 33.33% 0%, 33.33% 100%, 22.22% 100%);\n font-size: calc(var(--main-size) / 13);\n margin-left: -0.33em;\n opacity: 0.8;\n}\n\n.loader .text:nth-child(4) {\n clip-path: polygon(33.33% 0%, 44.44% 0%, 44.44% 100%, 33.33% 100%);\n font-size: calc(var(--main-size) / 11);\n margin-left: -0.05em;\n opacity: 0.9;\n}\n\n.loader .text:nth-child(5) {\n clip-path: polygon(44.44% 0%, 55.55% 0%, 55.55% 100%, 44.44% 100%);\n font-size: calc(var(--main-size) / 10);\n margin-left: 0em;\n opacity: 1;\n}\n\n.loader .text:nth-child(6) {\n clip-path: polygon(55.55% 0%, 66.66% 0%, 66.66% 100%, 55.55% 100%);\n font-size: calc(var(--main-size) / 11);\n margin-left: 0.05em;\n opacity: 0.9;\n}\n\n.loader .text:nth-child(7) {\n clip-path: polygon(66.66% 0%, 77.77% 0%, 77.77% 100%, 66.66% 100%);\n font-size: calc(var(--main-size) / 13);\n margin-left: 0.33em;\n opacity: 0.8;\n}\n\n.loader .text:nth-child(8) {\n clip-path: polygon(77.77% 0%, 88.88% 0%, 88.88% 100%, 77.77% 100%);\n font-size: calc(var(--main-size) / 16);\n margin-left: 0.98em;\n opacity: 0.7;\n}\n\n.loader .text:nth-child(9) {\n clip-path: polygon(88.88% 0%, 100% 0%, 100% 100%, 88.88% 100%);\n font-size: calc(var(--main-size) / 20);\n margin-left: 2.1em;\n opacity: 0.6;\n}\n\n.loader .text span {\n animation:\n scrolling 2s cubic-bezier(0.1, 0.6, 0.9, 0.4) infinite,\n shadow 2s cubic-bezier(0.1, 0.6, 0.9, 0.4) infinite;\n}\n\n.loader .text:nth-child(1) span {\n background: linear-gradient(\n to right,\n var(--text-color) 4%,\n var(--shadow-color) 7%\n );\n background-size: 200% auto;\n background-clip: text;\n color: transparent;\n}\n\n.loader .text:nth-child(2) span {\n background: linear-gradient(\n to right,\n var(--text-color) 9%,\n var(--shadow-color) 13%\n );\n background-size: 200% auto;\n background-clip: text;\n color: transparent;\n}\n\n.loader .text:nth-child(3) span {\n background: linear-gradient(\n to right,\n var(--text-color) 15%,\n var(--shadow-color) 18%\n );\n background-size: 200% auto;\n background-clip: text;\n color: transparent;\n}\n\n.loader .text:nth-child(4) span {\n background: linear-gradient(\n to right,\n var(--text-color) 20%,\n var(--shadow-color) 23%\n );\n background-size: 200% auto;\n background-clip: text;\n color: transparent;\n}\n\n.loader .text:nth-child(6) span {\n background: linear-gradient(\n to right,\n var(--shadow-color) 29%,\n var(--text-color) 32%\n );\n background-size: 200% auto;\n background-clip: text;\n color: transparent;\n}\n\n.loader .text:nth-child(7) span {\n background: linear-gradient(\n to right,\n var(--shadow-color) 34%,\n var(--text-color) 37%\n );\n background-size: 200% auto;\n background-clip: text;\n color: transparent;\n}\n\n.loader .text:nth-child(8) span {\n background: linear-gradient(\n to right,\n var(--shadow-color) 39%,\n var(--text-color) 42%\n );\n background-size: 200% auto;\n background-clip: text;\n color: transparent;\n}\n\n.loader .text:nth-child(9) span {\n background: linear-gradient(\n to right,\n var(--shadow-color) 45%,\n var(--text-color) 48%\n );\n background-size: 200% auto;\n background-clip: text;\n color: transparent;\n}\n\n.loader .line {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n height: 0.05em;\n width: calc(var(--main-size) / 2);\n margin-top: 0.9em;\n border-radius: 0.05em;\n}\n\n.loader .line::before {\n content: \"\";\n position: absolute;\n height: 100%;\n width: 100%;\n background-color: var(--text-color);\n opacity: 0.3;\n}\n\n.loader .line::after {\n content: \"\";\n position: absolute;\n height: 100%;\n width: 100%;\n background-color: var(--text-color);\n border-radius: 0.05em;\n transform: translateX(-90%);\n animation: wobble 2s cubic-bezier(0.5, 0.8, 0.5, 0.2) infinite;\n}\n\n@keyframes wobble {\n 0% {\n transform: translateX(-90%);\n }\n 50% {\n transform: translateX(90%);\n }\n 100% {\n transform: translateX(-90%);\n }\n}\n\n@keyframes scrolling {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(100%);\n }\n}\n\n@keyframes shadow {\n 0% {\n background-position: -98% 0;\n }\n 100% {\n background-position: 102% 0;\n }\n}\n"}

unlucky-mouse-21

👁 实时预览

📝 源代码