{"html":"

\n \n

\n \n \n \n

\n \n

\n \n \n \n

\n \n

\n \n \n \n

\n \n

\n","css":".loader-container {\n --color-primary: seagreen;\n --color-neutral: #fff;\n display: grid;\n grid-template-columns: repeat(6, 1fr);\n position: relative;\n width: 100%;\n height: 100%;\n}\n\n.area {\n &:nth-of-type(1):hover ~ .loader {\n transform: rotateX(-20deg) rotateY(20deg);\n }\n\n &:nth-of-type(2):hover ~ .loader {\n transform: rotateX(-20deg) rotateY(10deg);\n }\n\n &:nth-of-type(3):hover ~ .loader {\n transform: rotateX(-20deg) rotateY(5deg);\n }\n\n &:nth-of-type(4):hover ~ .loader {\n transform: rotateX(-20deg) rotateY(-5deg);\n }\n\n &:nth-of-type(5):hover ~ .loader {\n transform: rotateX(-20deg) rotateY(-10deg);\n }\n\n &:nth-of-type(6):hover ~ .loader {\n transform: rotateX(-20deg) rotateY(-20deg);\n }\n\n &:nth-of-type(7):hover ~ .loader {\n transform: rotateX(-10deg) rotateY(20deg);\n }\n\n &:nth-of-type(8):hover ~ .loader {\n transform: rotateX(-10deg) rotateY(10deg);\n }\n\n &:nth-of-type(9):hover ~ .loader {\n transform: rotateX(-10deg) rotateY(5deg);\n }\n\n &:nth-of-type(10):hover ~ .loader {\n transform: rotateX(-10deg) rotateY(-5deg);\n }\n\n &:nth-of-type(11):hover ~ .loader {\n transform: rotateX(-10deg) rotateY(-10deg);\n }\n\n &:nth-of-type(12):hover ~ .loader {\n transform: rotateX(-10deg) rotateY(-20deg);\n }\n\n &:nth-of-type(13):hover ~ .loader {\n transform: rotateX(-5deg) rotateY(20deg);\n }\n\n &:nth-of-type(14):hover ~ .loader {\n transform: rotateX(-5deg) rotateY(10deg);\n }\n\n &:nth-of-type(15):hover ~ .loader {\n transform: rotateX(-5deg) rotateY(5deg);\n }\n\n &:nth-of-type(16):hover ~ .loader {\n transform: rotateX(-5deg) rotateY(-5deg);\n }\n\n &:nth-of-type(17):hover ~ .loader {\n transform: rotateX(-5deg) rotateY(-10deg);\n }\n\n &:nth-of-type(18):hover ~ .loader {\n transform: rotateX(-5deg) rotateY(-20deg);\n }\n\n &:nth-of-type(19):hover ~ .loader {\n transform: rotateX(5deg) rotateY(20deg);\n }\n\n &:nth-of-type(20):hover ~ .loader {\n transform: rotateX(5deg) rotateY(10deg);\n }\n\n &:nth-of-type(21):hover ~ .loader {\n transform: rotateX(5deg) rotateY(5deg);\n }\n\n &:nth-of-type(22):hover ~ .loader {\n transform: rotateX(5deg) rotateY(-5deg);\n }\n\n &:nth-of-type(23):hover ~ .loader {\n transform: rotateX(5deg) rotateY(-10deg);\n }\n\n &:nth-of-type(24):hover ~ .loader {\n transform: rotateX(5deg) rotateY(-20deg);\n }\n\n &:nth-of-type(25):hover ~ .loader {\n transform: rotateX(10deg) rotateY(20deg);\n }\n\n &:nth-of-type(26):hover ~ .loader {\n transform: rotateX(10deg) rotateY(10deg);\n }\n\n &:nth-of-type(27):hover ~ .loader {\n transform: rotateX(10deg) rotateY(5deg);\n }\n\n &:nth-of-type(28):hover ~ .loader {\n transform: rotateX(10deg) rotateY(-5deg);\n }\n\n &:nth-of-type(29):hover ~ .loader {\n transform: rotateX(10deg) rotateY(-10deg);\n }\n\n &:nth-of-type(30):hover ~ .loader {\n transform: rotateX(10deg) rotateY(-20deg);\n }\n\n &:nth-of-type(31):hover ~ .loader {\n transform: rotateX(20deg) rotateY(20deg);\n }\n\n &:nth-of-type(32):hover ~ .loader {\n transform: rotateX(20deg) rotateY(10deg);\n }\n\n &:nth-of-type(33):hover ~ .loader {\n transform: rotateX(20deg) rotateY(5deg);\n }\n\n &:nth-of-type(34):hover ~ .loader {\n transform: rotateX(20deg) rotateY(-5deg);\n }\n\n &:nth-of-type(35):hover ~ .loader {\n transform: rotateX(20deg) rotateY(-10deg);\n }\n\n &:nth-of-type(36):hover ~ .loader {\n transform: rotateX(20deg) rotateY(-20deg);\n }\n}\n\n.loader {\n display: flex;\n position: absolute;\n top: 50%;\n left: 50%;\n transform-style: preserve-3d;\n transition: all 0.15s linear;\n translate: -50% -50%;\n\n & span {\n position: relative;\n height: 30px;\n background-color: var(--color-neutral);\n border-top: 0.2rem solid var(--color-primary);\n border-bottom: 0.2rem solid var(--color-primary);\n\n &::before {\n content: \"\";\n position: absolute;\n top: 0.2rem;\n width: 100%;\n height: calc(100% - 0.4rem);\n background-color: var(--color-primary);\n clip-path: inset(0 100% 0 0);\n animation: progress calc(var(--i) * 10ms) linear calc(var(--d) * 10ms)\n forwards;\n }\n }\n\n & > span {\n &:nth-of-type(1) {\n width: 100px;\n border-left: 0.2rem solid var(--color-primary);\n border-radius: 10px 0 0 10px;\n\n &::before {\n left: 0.2rem;\n width: calc(100% - 0.2rem + 1px);\n border-radius: 5px 0 0 5px;\n }\n }\n\n &:nth-of-type(2) {\n width: 10px;\n\n &::before {\n left: -1px;\n width: calc(100% + 2px);\n }\n }\n\n &:nth-of-type(3) {\n width: 50px;\n transform: translateZ(40px);\n\n &::before {\n left: -1px;\n width: calc(100% + 2px);\n }\n }\n\n &:nth-of-type(4) {\n width: 40px;\n border-right: 0.2rem solid var(--color-primary);\n border-radius: 0 10px 10px 0;\n\n &::before {\n right: 0.2rem;\n width: calc(100% - 0.2rem + 1px);\n border-radius: 0 5px 5px 0;\n }\n }\n }\n}\n\n.text {\n position: absolute;\n top: -60%;\n left: 10px;\n color: var(--color-primary);\n font-weight: 900;\n transform: translateZ(-20px);\n}\n\n.groove {\n position: relative;\n transform-style: preserve-3d;\n\n & > span {\n display: inline-block;\n }\n\n & > :first-child,\n & > :last-child {\n position: absolute;\n }\n\n &:nth-of-type(1) {\n & > :nth-child(1) {\n width: 50px;\n transform: rotateY(90deg);\n transform-origin: left;\n }\n\n & > :nth-child(2) {\n width: 30px;\n transform: translateZ(-50px);\n }\n\n & > :nth-child(3) {\n width: 50px;\n transform: rotateY(-90deg) translateX(-50px);\n transform-origin: left;\n }\n }\n\n &:nth-of-type(2) {\n & > :nth-child(1) {\n width: 100px;\n transform: rotateY(90deg);\n transform-origin: left;\n }\n\n & > :nth-child(2) {\n width: 15px;\n transform: translateZ(-100px);\n }\n\n & > :nth-child(3) {\n width: 140px;\n transform: rotateY(-90deg) translateX(-100px);\n transform-origin: left;\n }\n }\n\n &:nth-of-type(3) {\n & > :nth-child(1) {\n width: 60px;\n transform: rotateY(90deg) translateX(-40px);\n transform-origin: left;\n }\n\n & > :nth-child(2) {\n width: 30px;\n transform: translateZ(-20px);\n }\n\n & > :nth-child(3) {\n width: 20px;\n transform: rotateY(-90deg) translateX(-20px);\n transform-origin: left;\n }\n }\n}\n\n.btn {\n position: absolute;\n top: calc(50% + 5rem);\n left: 50%;\n padding: 0.5rem;\n border: 5px solid var(--color-primary);\n border-radius: 10px;\n background: linear-gradient(var(--color-primary), var(--color-primary)) 0 0 /\n 100% 0 no-repeat;\n color: var(--color-primary);\n font-weight: 900;\n transition: all 0.1s ease-in-out;\n transform: translate(-50%, -50%);\n cursor: pointer;\n\n &:hover {\n background-size: 100% 100%;\n color: var(--color-neutral);\n }\n\n &:active {\n font-size: 0.7em;\n\n & ~ .loader span::before {\n display: none;\n }\n }\n}\n\n@keyframes progress {\n to {\n clip-path: inset(0 0 0 0);\n }\n}\n"}

smart-bear-94

👁 实时预览

📝 源代码