{"html":"

\n \n \n

\n","css":".loader {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n perspective: 1000px;\n\n &,\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n .domino {\n width: 200px;\n height: 350px;\n background-color: #fff;\n transform-style: preserve-3d;\n transform: rotateX(60deg);\n transition: 0.5s;\n border-radius: 10px;\n\n &::before,\n &::after {\n content: \"\";\n position: absolute;\n width: 100%;\n }\n\n &::before {\n height: 50px;\n background-color: #ddd;\n bottom: 6px;\n border-radius: 10px 10px 0 0;\n left: 0;\n transform-origin: bottom;\n transform: rotateX(80deg);\n z-index: -1;\n overflow: hidden;\n }\n\n &::after {\n bottom: 1px;\n border-radius: 7px;\n background-color: #fff;\n z-index: 50;\n height: 30px;\n transform: rotateX(5deg);\n }\n\n &:hover {\n transform: rotateX(50deg);\n }\n\n .line {\n width: 90%;\n height: 1rem;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n box-shadow:\n inset 10px 10px 10px #222,\n inset -10px -10px 10px #2224;\n left: 5%;\n border-radius: 10px;\n }\n\n .point {\n width: 2rem;\n height: 2rem;\n box-shadow:\n inset 10px 10px 10px #222,\n inset -10px -10px 10px #2224;\n border-radius: 50%;\n }\n\n .container-top,\n .container-bottom {\n background-color: transparent;\n width: 100%;\n height: 50%;\n position: absolute;\n border-radius: 10px;\n }\n\n .container-top {\n position: absolute;\n top: 0;\n display: grid;\n grid-template-columns: auto auto;\n grid-template-rows: auto auto;\n justify-content: center;\n gap: 3rem;\n align-content: center;\n\n .point-center {\n position: inherit;\n transform: translate(-50%, -50%);\n top: 50%;\n left: 50%;\n }\n }\n\n .container-bottom {\n bottom: 0;\n position: absolute;\n\n .point {\n position: inherit;\n transform: translate(-50%, -50%);\n top: 50%;\n left: 50%;\n z-index: 10;\n }\n }\n }\n}\n"}

wet-goat-12

👁 实时预览

📝 源代码