{"html":"

\n \n

long click

","css":".button {\n width: 6rem;\n height: 6rem;\n background-color: #da6b34;\n border-radius: 0;\n box-shadow: 5px 5px 0px black;\n transform: translate(0,0);\n z-index: 1;\n padding: 0;\n position: relative;\n}\n\n.coin {\n position: absolute;\n z-index: -2;\n top: 50%;\n transform: translate(0,-20px);\n right: 45%;\n}\n\n.mario {\n position: absolute;\n z-index: 1;\n top: 50%;\n transform: translate(15px,200px);\n right: 45%;\n}\n\n.button:active ~ .mario {\n animation: jump2 0.6s ease-in-out;\n}\n\n.button:active {\n transform: translate(0,-15px);\n}\n\n.button:active ~ .coin {\n animation: jump 1s;\n}\n\n.button:hover {\n animation: animate 1s infinite;\n}\n\n.button-icon {\n position: relative;\n top: 25%;\n left: 63%;\n z-index: 1;\n transform: scale(1.5);\n}\n\n.overlay {\n position: absolute;\n width: 6rem;\n height: 6rem;\n background-color: #FFC07B;\n}\n\n.one {\n position: absolute;\n background-color: #DE5917;\n box-shadow: 2px 2px 0px black;\n width: 1rem;\n height: 0.35rem;\n z-index: 10;\n}\n\n.one:after {\n content: \"\";\n position: absolute;\n background-color: #DE5917;\n box-shadow: 2px 2px 0px black;\n width: 0.5rem;\n height: 0.5rem;\n transform: translate(5px,15px);\n z-index: 10;\n}\n\n.one:before {\n content: \"\";\n position: absolute;\n background-color: #DE5917;\n box-shadow: 2px 2px 0px black;\n width: 0.5rem;\n height: 0.5rem;\n transform: translate(5px,25px);\n z-index: 10;\n}\n\n.two {\n position: absolute;\n background-color: #DE5917;\n box-shadow: 2px 2px 0px black;\n width: 0.5rem;\n height: 0.5rem;\n transform: translate(-50%,50%);\n z-index: 10;\n}\n\n.two::after {\n content: \"\";\n position: absolute;\n background-color: #DE5917;\n box-shadow: 2px 2px 0px black;\n width: 0.5rem;\n height: 0.8rem;\n transform: translate(190%,-5%);\n z-index: 10;\n}\n\n.two::before {\n content: \"\";\n position: absolute;\n background-color: #DE5917;\n width: 0.7rem;\n height: 0.3rem;\n transform: translate(12px,8px);\n z-index: 10;\n}\n\n.dots {\n position: absolute;\n width: 5px;\n height: 5px;\n transform: translate(-20px,-12px);\n background-color: #000;\n}\n\n.dots::after {\n content: \"\";\n position: absolute;\n width: 5px;\n height: 5px;\n transform: translate(50px,0px);\n background-color: #000;\n}\n\n.dots2 {\n position: absolute;\n width: 5px;\n height: 5px;\n transform: translate(-20px,40px);\n background-color: #000;\n}\n\n.dots2::after {\n content: \"\";\n position: absolute;\n width: 5px;\n height: 5px;\n transform: translate(50px,0px);\n background-color: #000;\n}\n\n@keyframes animate {\n 0% {\n background-color: #FFC07B;\n }\n\n 75% {\n background-color: #DE5917;\n }\n\n 100% {\n background-color: #da6b34;\n }\n}\n\n@keyframes jump {\n 0% {\n transform: translate(0,-15px) rotateY(0deg);\n }\n\n 50% {\n transform: translate(0,-200px) rotateY(180deg);\n }\n\n 75% {\n transform: translate(0,-15px) rotateY(270deg);\n }\n\n 100% {\n transform: translate(0,-15px) rotateY(360deg);\n }\n}\n\n.button-container p {\n color: black;\n text-align: center;\n transform: translate(0,1rem);\n font-weight: bold;\n z-index: -2;\n}\n\n@keyframes jump2 {\n 0% {\n transform: translate(20px,200px);\n }\n\n 50% {\n transform: translate(20px,25px);\n }\n\n 100% {\n transform: translate(20px,200px);\n }\n}"}

friendly-wasp-57

👁 实时预览

📝 源代码