{"html":"\n

Click me!

\n \n

\n\n","css":".container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n.container {\n display: flex;\n flex-direction: column;\n align-items: center;\n position: relative;\n cursor: pointer;\n user-select: none;\n}\n\n.simple-text {\n position: absolute;\n bottom: -40px;\n width: 120px;\n text-align: center;\n color: white;\n font-size: 16pt;\n font-weight: 800;\n font-family: monospace;\n}\n\n.torch {\n display: flex;\n justify-content: center;\n height: 150px;\n}\n\n.head,\n.stick {\n position: absolute;\n width: 30px;\n transform-style: preserve-3d;\n transform: rotateX(-30deg) rotateY(45deg);\n}\n\n.stick {\n position: relative;\n height: 120px;\n}\n\n.face {\n position: absolute;\n transform-style: preserve-3d;\n width: 30px;\n height: 30px;\n display: grid;\n grid-template-columns: 50% 50%;\n grid-template-rows: 50% 50%;\n background-color: #000000;\n}\n\n.top {\n transform: rotateX(90deg) translateZ(15px);\n}\n\n.left {\n transform: rotateY(-90deg) translateZ(15px);\n}\n\n.right {\n transform: rotateY(0deg) translateZ(15px);\n}\n\n.top div,\n.left div,\n.right div {\n width: 102%;\n height: 102%;\n}\n\n.top div:nth-child(1),\n.left div:nth-child(3),\n.right div:nth-child(3) {\n background-color: #ffff9760;\n}\n\n.top div:nth-child(2),\n.left div:nth-child(1),\n.right div:nth-child(1) {\n background-color: #ffd80060;\n}\n\n.top div:nth-child(3),\n.left div:nth-child(4),\n.right div:nth-child(4) {\n background-color: #ffffff60;\n}\n\n.top div:nth-child(4),\n.left div:nth-child(2),\n.right div:nth-child(2) {\n background-color: #ff8f0060;\n}\n\n.side {\n position: absolute;\n width: 30px;\n height: 120px;\n display: grid;\n grid-template-columns: 50% 50%;\n grid-template-rows: repeat(8, 12.5%);\n cursor: pointer;\n translate: 0 12px;\n}\n\n.side-left {\n transform: rotateY(-90deg) translateZ(15px) translateY(8px);\n}\n\n.side-right {\n transform: rotateY(0deg) translateZ(15px) translateY(8px);\n}\n\n.side-left div,\n.side-right div {\n width: 103%;\n height: 103%;\n}\n\n.side div:nth-child(1) {\n background-color: #443622;\n}\n\n.side div:nth-child(2),\n.side div:nth-child(2) {\n background-color: #2e2517;\n}\n\n.side div:nth-child(3),\n.side div:nth-child(5) {\n background-color: #4b3b23;\n}\n\n.side div:nth-child(4),\n.side div:nth-child(10) {\n background-color: #251e12;\n}\n\n.side div:nth-child(6) {\n background-color: #292115;\n}\n\n.side div:nth-child(7) {\n background-color: #4b3c26;\n}\n\n.side div:nth-child(8) {\n background-color: #292115;\n}\n\n.side div:nth-child(9) {\n background-color: #4b3a21;\n}\n\n.side div:nth-child(11),\n.side div:nth-child(15) {\n background-color: #3d311d;\n}\n\n.side div:nth-child(12) {\n background-color: #2c2315;\n}\n\n.side div:nth-child(13) {\n background-color: #493a22;\n}\n\n.side div:nth-child(14) {\n background-color: #2b2114;\n}\n\n.side div:nth-child(16) {\n background-color: #271e10;\n}\n\n.container input:checked ~ .torch .face {\n filter: drop-shadow(0px 0px 2px rgb(255, 255, 255))\n drop-shadow(0px 0px 10px rgba(255, 237, 156, 0.7))\n drop-shadow(0px 0px 25px rgba(255, 227, 101, 0.4));\n}\n\n.container input:checked ~ .torch .top div:nth-child(1),\n.container input:checked ~ .torch .left div:nth-child(3),\n.container input:checked ~ .torch .right div:nth-child(3) {\n background-color: #ffff97;\n}\n\n.container input:checked ~ .torch .top div:nth-child(2),\n.container input:checked ~ .torch .left div:nth-child(1),\n.container input:checked ~ .torch .right div:nth-child(1) {\n background-color: #ffd800;\n}\n\n.container input:checked ~ .torch .top div:nth-child(3),\n.container input:checked ~ .torch .left div:nth-child(4),\n.container input:checked ~ .torch .right div:nth-child(4) {\n background-color: #ffffff;\n}\n\n.container input:checked ~ .torch .top div:nth-child(4),\n.container input:checked ~ .torch .left div:nth-child(2),\n.container input:checked ~ .torch .right div:nth-child(2) {\n background-color: #ff8f00;\n}\n\n.container input:checked ~ .torch .side div:nth-child(1) {\n background-color: #7c623e;\n}\n\n.container input:checked ~ .torch .side div:nth-child(2),\n.container input:checked ~ .torch .side div:nth-child(2) {\n background-color: #4c3d26;\n}\n\n.container input:checked ~ .torch .side div:nth-child(3),\n.container input:checked ~ .torch .side div:nth-child(5) {\n background-color: #937344;\n}\n\n.container input:checked ~ .torch .side div:nth-child(4),\n.container input:checked ~ .torch .side div:nth-child(10) {\n background-color: #3c2f1c;\n}\n\n.container input:checked ~ .torch .side div:nth-child(6) {\n background-color: #423522;\n}\n\n.container input:checked ~ .torch .side div:nth-child(7) {\n background-color: #9f7f50;\n}\n\n.container input:checked ~ .torch .side div:nth-child(8) {\n background-color: #403320;\n}\n\n.container input:checked ~ .torch .side div:nth-child(9) {\n background-color: #977748;\n}\n\n.container input:checked ~ .torch .side div:nth-child(11),\n.container input:checked ~ .torch .side div:nth-child(15) {\n background-color: #675231;\n}\n\n.container input:checked ~ .torch .side div:nth-child(12) {\n background-color: #3d301d;\n}\n\n.container input:checked ~ .torch .side div:nth-child(13) {\n background-color: #987849;\n}\n\n.container input:checked ~ .torch .side div:nth-child(14) {\n background-color: #3b2e1b;\n}\n\n.container input:checked ~ .torch .side div:nth-child(16) {\n background-color: #372a17;\n}\n"}

angry-wasp-95

👁 实时预览

📝 源代码

🔗 相关联的样式