{"html":"

\n \n \n \n \n \n \n \n \n \n

\n","css":".container-octa {\n --w: 150px;\n --h: 150px;\n zoom: 0.8;\n width: var(--w);\n height: var(--h);\n position: absolute;\n top: 50%;\n left: 50%;\n perspective: 5000px;\n transform-style: preserve-3d;\n animation: rotar 8s linear infinite both;\n\n .side {\n position: absolute;\n width: 200px;\n width: var(--w);\n height: var(--h);\n clip-path: polygon(50% 0, 100% 100%, 0 100%);\n background: radial-gradient(circle, transparent, #00c8ff88, transparent);\n }\n\n .side-btn {\n top: 100%;\n background-color: transparent;\n clip-path: polygon(0% 0%, 100% 0%, 50% 100%);\n }\n\n .base {\n clip-path: none;\n transform-origin: 50% 100%;\n transform: rotateX(-90deg);\n visibility: hidden;\n }\n\n .front {\n transform-origin: 50% 100%;\n transform: rotateX(-30deg);\n }\n\n .back {\n transform-origin: 50% 100%;\n transform: translateZ(var(--w)) rotateX(30deg);\n }\n\n .right {\n transform-origin: 100% 100%;\n transform: rotateY(90deg) rotateX(30deg);\n }\n\n .left {\n transform-origin: 0% 100%;\n transform: rotateY(-90deg) rotateX(30deg);\n }\n\n .front-bottom {\n transform-origin: 50% 0;\n transform: rotateX(30deg);\n }\n\n .back-bottom {\n transform-origin: 50% 0;\n transform: translateZ(var(--w)) rotateX(-30deg);\n }\n\n .left-bottom {\n transform-origin: 0% 0%;\n transform: rotateY(-90deg) rotateX(-30deg);\n }\n\n .right-bottom {\n transform-origin: 100% 0%;\n transform: rotateY(90deg) rotateX(-30deg);\n }\n}\n\n@keyframes rotar {\n 0% {\n transform: translate(-50%, -50%) rotateX(0deg) rotateY(0deg);\n }\n\n 100% {\n transform: translate(-50%, -50%) rotateX(360deg) rotateY(360deg);\n }\n}\n"}

mighty-octopus-32

👁 实时预览

📝 源代码