{"html":"

\n \n \n \n \n \n \n \n \n \n \n \n \n
\n MENU CARD\n

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

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

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

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

\n \n

\n\n

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

\n\n

\n Are you sure you want to choose this option?\n

\n\n

\n \n \n Yes\n

\n \n \n \n No\n

\n \n

\n\n Click for more!\n

\n","css":"/* -- FULL VERSION OF THIS CARD[WITH SOUND] IS AVAILABLE HERE - praashoo7.github.io/NFS-MW-MenuCard -- */\n\n.main {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n gap: 1em;\n user-select: none;\n}\n.mainTitle {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n}\n.mainTitle span {\n color: white;\n font-weight: bold;\n font-family: Montserrat Regular;\n margin-top: -2em;\n margin-bottom: 2em;\n letter-spacing: 0.9em;\n margin-left: 0.8em;\n font-size: 0.85em;\n}\n.bottomText {\n margin-top: 1em;\n color: white;\n font-weight: bold;\n font-family: Montserrat Regular;\n}\n\n.open:checked ~ .overlay {\n display: block;\n}\n.open:checked ~ .menu {\n display: block;\n}\n.open:checked ~ .corner1 {\n animation: 0.35s openCorner1 linear forwards;\n}\n.open:checked ~ .corner2 {\n animation: 0.35s openCorner2 linear forwards;\n}\n.open:checked ~ .corner3 {\n animation: 0.35s openCorner3 linear forwards;\n}\n.open:checked ~ .corner4 {\n animation: 0.35s openCorner4 linear forwards;\n}\n.open:checked ~ .menu .middleDiv {\n animation: 0.15s openMiddleMenu linear forwards;\n}\n\n.overlay {\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgb(10, 10, 10, 0.75);\n z-index: 2;\n display: none;\n}\n\n.menuWrapper {\n left: 50%;\n top: 51%;\n transform: translate(-50%, -50%);\n}\n\n.menuWrapper {\n position: absolute;\n width: 17.5em;\n display: none;\n height: max-content;\n z-index: 3;\n}\n.menuWrapper .menu,\n.menuOpenBtns {\n position: relative;\n width: 17.5em;\n height: max-content;\n background-color: #020203;\n outline: 5px solid #4b4b47;\n border: 1px solid black;\n z-index: 3;\n}\n\n.menuOpenBtns {\n position: relative;\n width: 17.5em;\n display: block;\n z-index: 1;\n opacity: 1;\n}\n.selectionBtns {\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: white;\n margin: 1em;\n padding: 1em;\n}\n.selectionBtns .open {\n text-align: center;\n font-weight: bold;\n font-family: Montserrat Regular;\n}\n.open {\n position: relative;\n}\n\n.corner1,\n.corner2,\n.corner3,\n.corner4 {\n position: absolute;\n width: 1em;\n height: 1em;\n background-color: transparent;\n margin: -1em;\n transform: rotateY(180deg);\n z-index: 4;\n}\n.corner1 {\n top: 50%;\n left: 50%;\n border-top: 2px solid #fefeff;\n border-left: 2px solid #fefeff;\n transform: rotateZ(180deg);\n animation: 0.35s openCorner1 ease forwards;\n}\n.corner2 {\n top: 50%;\n right: 50%;\n border-top: 2px solid #fefeff;\n border-right: 2px solid #fefeff;\n transform: rotateZ(180deg);\n animation: 0.35s openCorner2 ease forwards;\n}\n.corner3 {\n bottom: 50%;\n left: 50%;\n border-bottom: 2px solid #fefeff;\n border-left: 2px solid #fefeff;\n transform: rotateZ(180deg);\n animation: 0.35s openCorner3 ease forwards;\n}\n.corner4 {\n bottom: 50%;\n right: 50%;\n border-bottom: 2px solid #fefeff;\n border-right: 2px solid #fefeff;\n transform: rotateZ(180deg);\n animation: 0.35s openCorner4 ease forwards;\n}\n\n.topHeadingDiv {\n width: 100%;\n height: 3.5em;\n display: flex;\n align-items: center;\n justify-content: start;\n color: white;\n font-family: Montserrat Regular;\n font-weight: bold;\n font-size: 1.25em;\n background: repeating-linear-gradient(\n 135deg,\n #222221,\n #222221 10px,\n transparent 10px,\n transparent 20px\n );\n border-bottom: 5px solid #222221;\n}\n.middleDiv {\n display: flex;\n align-items: center;\n justify-content: start;\n color: white;\n background-color: transparent;\n font-family: Montserrat Regular;\n font-weight: bold;\n font-size: 1em;\n position: relative;\n width: 100%;\n height: 7em;\n}\n.middleDiv::after {\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n background: repeating-linear-gradient(\n 135deg,\n #222221,\n #222221 10px,\n transparent 10px,\n transparent 20px\n );\n opacity: 0.15;\n}\n.bottomDiv {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 5em;\n gap: 1em;\n background: repeating-linear-gradient(\n 135deg,\n #222221,\n #222221 10px,\n transparent 10px,\n transparent 20px\n );\n border-top: 5px solid #222221;\n}\n.bottomDiv .buttons {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: end;\n width: 100%;\n height: 3em;\n background-color: rgb(0, 0, 0, 0.7);\n}\n.yes,\n.no {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 5em;\n height: 2em;\n margin: 0 1em 0 0;\n background-color: #272727;\n color: white;\n font-family: Montserrat Regular;\n font-weight: bold;\n font-size: 1em;\n}\n\n.yes:hover,\n.no:hover {\n color: #a37434;\n}\n.yes:hover span,\n.no:hover span {\n animation: hoverText 1s ease-in-out infinite;\n}\n@keyframes hoverText {\n 0% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n.yes:hover .cornerBtn11,\n.yes:hover .cornerBtn12,\n.yes:hover .cornerBtn13,\n.yes:hover .cornerBtn14 {\n opacity: 1;\n}\n.no:hover .cornerBtn21,\n.no:hover .cornerBtn22,\n.no:hover .cornerBtn23,\n.no:hover .cornerBtn24 {\n opacity: 1;\n}\n\n.cornerBtn11,\n.cornerBtn12,\n.cornerBtn13,\n.cornerBtn14,\n.cornerBtn21,\n.cornerBtn22,\n.cornerBtn23,\n.cornerBtn24,\n.cornerCBtn1,\n.cornerCBtn2,\n.cornerCBtn3,\n.cornerCBtn4 {\n position: absolute;\n width: 0.75em;\n height: 0.75em;\n background-color: transparent;\n margin: -0.45em;\n opacity: 0;\n}\n.cornerCBtn1,\n.cornerCBtn2,\n.cornerCBtn3,\n.cornerCBtn4 {\n margin: -1em;\n}\n.cornerBtn11,\n.cornerBtn21 {\n top: 0;\n left: 0;\n border-top: 2px solid #a37434;\n border-left: 2px solid #a37434;\n}\n.cornerBtn12,\n.cornerBtn22 {\n top: 0;\n right: 0;\n border-top: 2px solid #a37434;\n border-right: 2px solid #a37434;\n}\n.cornerBtn13,\n.cornerBtn23 {\n bottom: 0;\n left: 0;\n border-bottom: 2px solid #a37434;\n border-left: 2px solid #a37434;\n}\n.cornerBtn14,\n.cornerBtn24 {\n bottom: 0;\n right: 0;\n border-bottom: 2px solid #a37434;\n border-right: 2px solid #a37434;\n}\n.cornerCBtn1 {\n top: 0;\n left: 0;\n border-top: 2px solid #ebd518;\n border-left: 2px solid #ebd518;\n}\n.cornerCBtn2 {\n top: 0;\n right: 0;\n border-top: 2px solid #ebd518;\n border-right: 2px solid #ebd518;\n}\n.cornerCBtn3 {\n bottom: 0;\n left: 0;\n border-bottom: 2px solid #ebd518;\n border-left: 2px solid #ebd518;\n}\n.cornerCBtn4 {\n bottom: 0;\n right: 0;\n border-bottom: 2px solid #ebd518;\n border-right: 2px solid #ebd518;\n}\n\n.clickSVG {\n fill: white;\n width: 50px;\n height: 50px;\n}\n.open:hover .clickSVG {\n fill: #ebd518;\n animation: svgHover 0.5s ease-in-out infinite;\n}\n@keyframes svgHover {\n 0% {\n scale: 1;\n }\n 50% {\n scale: 0.95;\n }\n 100% {\n scale: 1;\n }\n}\n\n.open:hover .cornerCBtn1,\n.open:hover .cornerCBtn2,\n.open:hover .cornerCBtn3,\n.open:hover .cornerCBtn4 {\n opacity: 1;\n}\n.open:hover span {\n display: inline-block;\n animation: openSpanHover 0.75s ease infinite;\n}\n@keyframes openSpanHover {\n 0% {\n transform: scale(1);\n }\n 50% {\n transform: scale(0.9);\n }\n 100% {\n transform: scale(1);\n }\n}\n\n@keyframes openCorner1 {\n 20% {\n transform: rotateY(180deg) rotateZ(0);\n }\n 50% {\n top: 0;\n left: 50%;\n }\n 51% {\n transform: rotateY(0deg);\n }\n 100% {\n top: 0;\n left: 0;\n transform: rotateY(0deg);\n }\n}\n@keyframes openCorner2 {\n 20% {\n transform: rotateY(180deg) rotateZ(0);\n }\n 50% {\n top: 0;\n right: 50%;\n }\n 51% {\n transform: rotateY(0deg);\n }\n 100% {\n top: 0;\n right: 0;\n transform: rotateY(0deg);\n }\n}\n@keyframes openCorner3 {\n 20% {\n transform: rotateY(180deg) rotateZ(0);\n }\n 50% {\n bottom: 0;\n left: 50%;\n }\n 51% {\n transform: rotateY(0deg);\n }\n 100% {\n bottom: 0;\n left: 0;\n transform: rotateY(0deg);\n }\n}\n@keyframes openCorner4 {\n 20% {\n transform: rotateY(180deg) rotateZ(0);\n }\n 50% {\n bottom: 0;\n right: 50%;\n }\n 51% {\n transform: rotateY(0deg);\n }\n 100% {\n bottom: 0;\n right: 0;\n transform: rotateY(0deg);\n }\n}\n@keyframes closeCorner1 {\n 0% {\n top: 0;\n left: 0;\n transform: rotateY(0deg) rotateZ(0);\n }\n 50% {\n top: 0;\n left: 50%;\n transform: rotateY(180deg) rotateZ(0);\n }\n 50.5% {\n transform: rotateY(180deg) rotateZ(0deg);\n }\n 89% {\n transform: rotateY(180deg) rotateZ(0deg);\n }\n 89.5% {\n transform: rotateY(180deg) rotateZ(180deg);\n }\n 90% {\n left: 50%;\n top: 50%;\n transform: rotateY(180deg) rotateZ(180deg);\n }\n 95% {\n transform: rotateY(0deg) rotateZ(180deg);\n }\n 100% {\n transform: rotateY(0deg) rotateZ(180deg);\n }\n}\n@keyframes closeCorner2 {\n 0% {\n top: 0;\n right: 0;\n transform: rotateY(0deg) rotateZ(0);\n }\n 50% {\n top: 0;\n right: 50%;\n transform: rotateY(180deg) rotateZ(0);\n }\n 50.5% {\n transform: rotateY(180deg) rotateZ(0deg);\n }\n 89% {\n transform: rotateY(180deg) rotateZ(0deg);\n }\n 89.5% {\n transform: rotateY(180deg) rotateZ(180deg);\n }\n 90% {\n right: 50%;\n top: 50%;\n transform: rotateY(180deg) rotateZ(180deg);\n }\n 95% {\n transform: rotateY(0deg) rotateZ(180deg);\n }\n 100% {\n transform: rotateY(0deg) rotateZ(180deg);\n }\n}\n@keyframes closeCorner3 {\n 0% {\n bottom: 0;\n left: 0;\n transform: rotateY(0deg) rotateZ(0);\n }\n 50% {\n bottom: 0;\n left: 50%;\n transform: rotateY(180deg) rotateZ(0);\n }\n 50.5% {\n transform: rotateY(180deg) rotateZ(0deg);\n }\n 89% {\n transform: rotateY(180deg) rotateZ(0deg);\n }\n 89.5% {\n transform: rotateY(180deg) rotateZ(180deg);\n }\n 90% {\n left: 50%;\n bottom: 50%;\n transform: rotateY(180deg) rotateZ(180deg);\n }\n 95% {\n transform: rotateY(0deg) rotateZ(180deg);\n }\n 100% {\n transform: rotateY(0deg) rotateZ(180deg);\n }\n}\n@keyframes closeCorner4 {\n 0% {\n bottom: 0;\n right: 0;\n transform: rotateY(0deg) rotateZ(0);\n }\n 50% {\n bottom: 0;\n right: 50%;\n transform: rotateY(180deg) rotateZ(0);\n }\n 50.5% {\n transform: rotateY(180deg) rotateZ(0deg);\n }\n 89% {\n transform: rotateY(180deg) rotateZ(0deg);\n }\n 89.5% {\n transform: rotateY(180deg) rotateZ(180deg);\n }\n 90% {\n right: 50%;\n bottom: 50%;\n transform: rotateY(180deg) rotateZ(180deg);\n }\n 95% {\n transform: rotateY(0deg) rotateZ(180deg);\n }\n 100% {\n transform: rotateY(0deg) rotateZ(180deg);\n }\n}\n@keyframes openMiddleMenu {\n 0% {\n background-color: transparent;\n }\n 25% {\n background-color: grey;\n }\n 50% {\n background-color: transparent;\n }\n 75% {\n background-color: grey;\n }\n 100% {\n background-color: transparent;\n }\n}\n@keyframes closeMiddleMenu {\n 0% {\n background-color: transparent;\n }\n 25% {\n background-color: grey;\n }\n 50% {\n background-color: transparent;\n }\n 75% {\n background-color: grey;\n }\n 100% {\n background-color: transparent;\n }\n}\n\n@keyframes menuOpen {\n 0% {\n opacity: 0;\n display: block;\n }\n 49.5% {\n opacity: 0;\n display: block;\n }\n 50% {\n opacity: 1;\n display: block;\n }\n 100% {\n opacity: 1;\n display: block;\n }\n}\n@keyframes overlayOpen {\n 0% {\n display: none;\n }\n 100% {\n display: block;\n }\n}\n@keyframes overlayClose {\n 0% {\n display: block;\n }\n 100% {\n display: none;\n }\n}\n@keyframes menuWrapperClose {\n 0% {\n display: block;\n }\n 99% {\n display: block;\n }\n 100% {\n display: none;\n }\n}\n@keyframes menuClose {\n 0% {\n opacity: 1;\n display: block;\n }\n 25% {\n opacity: 0;\n display: block;\n }\n 40% {\n opacity: 0;\n display: block;\n }\n 50% {\n opacity: 0;\n display: block;\n }\n 75% {\n opacity: 0;\n display: none;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n}\n\n.open,\n.yesCheck {\n z-index: 5;\n}\n.open:checked ~ .overlay {\n display: block;\n}\n.open:checked ~ .corner1 {\n animation: 0.35s openCorner1 linear forwards;\n}\n.open:checked ~ .corner2 {\n animation: 0.35s openCorner2 linear forwards;\n}\n.open:checked ~ .corner3 {\n animation: 0.35s openCorner3 linear forwards;\n}\n.open:checked ~ .corner4 {\n animation: 0.35s openCorner4 linear forwards;\n}\n.open:checked ~ .menuWrapper {\n display: block;\n}\n.open:checked ~ .menuWrapper .menu {\n animation: 0.45s menuOpen linear forwards;\n}\n.open:checked ~ .menuWrapper .menu .middleDiv {\n animation: 0.22s openMiddleMenu 0.11s linear forwards;\n}\n\n.yesCheck,\n.noCheck {\n display: none;\n}\n.yesCheck:checked ~ .menuWrapper .menu .bottomDiv .buttons .no {\n opacity: 0;\n}\n.noCheck:checked ~ .menuWrapper .menu .bottomDiv .buttons .yes {\n opacity: 0;\n}\n\n.yesCheck:checked ~ .menuWrapper .menu .bottomDiv .buttons .yes {\n background-color: rgb(163, 116, 52, 0.25);\n color: rgb(163, 116, 52, 1);\n}\n.noCheck:checked ~ .menuWrapper .menu .bottomDiv .buttons .no {\n background-color: rgb(163, 116, 52, 0.25);\n color: rgb(163, 116, 52, 1);\n}\n\n.yesCheck:checked ~ .menuWrapper .menu .middleDiv,\n.noCheck:checked ~ .menuWrapper .menu .middleDiv {\n animation: 0.25s closeMiddleMenu linear forwards;\n}\n\n.yesCheck:checked ~ .menuWrapper .corner1,\n.noCheck:checked ~ .menuWrapper .corner1 {\n animation: 0.35s closeCorner1 linear forwards;\n}\n.yesCheck:checked ~ .menuWrapper .corner2,\n.noCheck:checked ~ .menuWrapper .corner2 {\n animation: 0.35s closeCorner2 linear forwards;\n}\n.yesCheck:checked ~ .menuWrapper .corner3,\n.noCheck:checked ~ .menuWrapper .corner3 {\n animation: 0.35s closeCorner3 linear forwards;\n}\n.yesCheck:checked ~ .menuWrapper .corner4,\n.noCheck:checked ~ .menuWrapper .corner4 {\n animation: 0.35s closeCorner4 linear forwards;\n}\n\n.yesCheck:checked ~ .menuWrapper,\n.noCheck:checked ~ .menuWrapper {\n animation: 0.4s menuWrapperClose linear forwards;\n}\n.yesCheck:checked ~ .menuWrapper .menu,\n.noCheck:checked ~ .menuWrapper .menu {\n animation: 0.4s menuClose 0.1s step-end forwards;\n}\n.yesCheck:checked ~ .overlay,\n.noCheck:checked ~ .overlay {\n animation: 0.4s overlayClose linear forwards;\n}\n"}

hard-fish-40

👁 实时预览

📝 源代码