{"html":"

REC

\n \n \n \n

\n","css":".loader {\n --c: #f7971d;\n}\n\n.ph1 {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n animation: ph1 3s ease infinite;\n clip-path: polygon(-4em -1em, 4em -1em, 4em 1em, -4em 1em);\n}\n\n.record {\n position: absolute;\n left: 50%;\n top: 50%;\n width: 2em;\n height: 2em;\n background: var(--c);\n border-radius: 999px;\n animation: blink 1s step-end infinite;\n transform: translate(-3.5em, -50%);\n}\n\n.record-text {\n position: absolute;\n color: var(--c);\n font-size: 2.2em;\n font-weight: 700;\n left: 50%;\n top: 50%;\n transform: translate(-0.5em, -50%);\n width: 2em;\n height: 1.5em;\n}\n\n@keyframes blink {\n 50% {\n opacity: 0;\n }\n 75% {\n opacity: 1;\n }\n}\n\n@keyframes ph1 {\n 25.5% {\n translate: 0 0;\n clip-path: polygon(-4em -1em, 4em -1em, 4em 1em, -4em 1em);\n }\n 30%,\n to {\n opacity: 1;\n translate: 0 3em;\n clip-path: polygon(-4em 1em, 4em 1em, 4em 1em, -4em 1em);\n }\n 30.1% {\n opacity: 0;\n translate: 0 3em;\n }\n\n 92.4%,\n to {\n translate: 0 0;\n opacity: 0;\n clip-path: polygon(-4em -1em, 4em -1em, 4em 1em, -4em 1em);\n }\n 92.5% {\n opacity: 1;\n clip-path: polygon(-4em -1em, -0.5em -1em, -0.5em 1em, -4em 1em);\n }\n to {\n opacity: 1;\n clip-path: polygon(-4em -1em, 4em -1em, 4em 1em, -4em 1em);\n }\n}\n\n.ph2 {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -4em);\n width: 11em;\n height: 7em;\n perspective: 150px;\n perspective-origin: 50% 0%;\n transform-style: preserve-3d;\n animation: ph2 3s ease-in-out infinite;\n}\n\n@keyframes ph2 {\n 0%,\n 15% {\n translate: 0 4em;\n }\n 0%,\n 29% {\n opacity: 0;\n }\n 30% {\n opacity: 1;\n }\n 40% {\n translate: 0 0;\n }\n 50% {\n translate: 0 0.5em;\n opacity: 1;\n }\n 50.1%,\n to {\n opacity: 0;\n }\n}\n\n.laptop-b {\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n height: 0.5em;\n background: var(--c);\n border-bottom-left-radius: 2em;\n border-bottom-right-radius: 2em;\n animation: ph2b 3s ease infinite;\n}\n\n.laptop-t {\n margin: 0 1.25em;\n color: var(--c);\n transform-origin: 50% 100%;\n animation: ph2t 3s ease infinite;\n}\n\n@keyframes ph2t {\n 0%,\n 29% {\n transform: rotateX(-10deg);\n }\n 0%,\n 41.9% {\n stroke-dasharray: unset;\n }\n 42% {\n transform: rotateX(4deg);\n stroke-dasharray: 0 0 100;\n }\n 50% {\n transform: rotateX(-20deg);\n stroke-dasharray: 0 50 0 100;\n }\n}\n\n@keyframes ph2b {\n 42% {\n scale: 1 1;\n }\n 50% {\n scale: 0 1;\n }\n}\n\n.icon {\n position: absolute;\n width: 4em;\n height: 4em;\n background: var(--c);\n border-radius: 999px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n transform-origin: center;\n animation: icon 3s ease-in-out infinite;\n isolation: isolate;\n border-color: var(--c);\n border-style: solid;\n z-index: -1;\n}\n\n@keyframes icon {\n 0%,\n 15% {\n translate: 0 4.5em;\n width: 0;\n height: 0;\n }\n 0%,\n 29% {\n opacity: 0;\n }\n 30% {\n opacity: 1;\n }\n 40% {\n translate: 0 -0.75em;\n width: 4em;\n height: 4em;\n }\n 50% {\n translate: 0 0em;\n opacity: 1;\n background: var(--c);\n }\n 50.1% {\n border-width: 2em;\n background: black;\n }\n 65% {\n width: 4em;\n height: 4em;\n transform: translate(-50%, -50%);\n border-width: 4px;\n }\n 80%,\n to {\n width: 2em;\n height: 2em;\n translate: 0 0;\n transform: translate(-3.5em, -50%);\n border-width: 1em;\n background: black;\n }\n 80.1%,\n to {\n background: var(--c);\n }\n 84.9% {\n opacity: 1;\n }\n 85%,\n to {\n opacity: 0;\n }\n}\n\n.icon::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n border: 0.8em solid black;\n box-sizing: border-box;\n border-left-color: transparent !important;\n border-bottom-color: transparent !important;\n transform: translate(-50%, 2.5em) rotate(-45deg);\n transform-origin: center;\n animation: iconb 3s ease-in-out infinite;\n z-index: -1;\n}\n\n@keyframes iconb {\n 20% {\n transform: translate(-50%, 2.5em) rotate(-45deg);\n }\n 50% {\n transform: translate(-50%, -25%) rotate(-45deg);\n border-color: black;\n }\n 65%,\n to {\n transform: translateY(0) scale(1) scaleX(1.5) translate(-60%, -50%)\n rotate(45deg);\n border-color: var(--c);\n }\n 85%,\n to {\n transform: translate(-40%, -50%) scale(0) scaleX(1.5) translate(-75%, -50%)\n rotate(45deg);\n }\n}\n\n.icon::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n background: black;\n width: 1em;\n height: 2em;\n box-sizing: border-box;\n border-left-color: transparent;\n border-bottom-color: transparent;\n animation: icona 3s ease-in-out infinite;\n}\n\n@keyframes icona {\n 20% {\n transform: translate(-50%, 2.5em);\n }\n 50% {\n transform: translate(-50%, 0.4em);\n }\n 65%,\n to {\n transform: translate(-50%, 2.5em);\n }\n}\n"}

silent-cougar-84

👁 实时预览

📝 源代码