{"html":"\n \n

NOUVEAU

\n \n \n NOUVEAU\n \n \n \n\n","css":"/* Cacher la case à cocher */\n.container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n.container {\n display: block;\n position: relative;\n cursor: pointer;\n font-size: 20px;\n user-select: none;\n transition: all 0.3s ease;\n}\n\n/* Style de départ pour le bouton rond */\n.checkmark {\n position: relative;\n font-size: 10px;\n font-weight: 800;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 100%;\n top: 0;\n left: 0;\n height: 70px;\n width: 70px;\n background-color: #ffffff00;\n color: #000000;\n border: solid 3px #000000;\n transition: all 0.3s ease;\n}\n\n/* Effet hover sur le bouton */\n.container:hover {\n transform: rotate(-20deg) scale(1.03);\n}\n\n/* Styles pour le sticker */\n.sticker {\n font-family: inherit;\n font-weight: 800;\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n margin: auto;\n z-index: 5;\n width: 70px;\n height: 70px;\n border-radius: 50%;\n transition: 0.2s 0.2s;\n transform: translate3d(5px, 10px, 0) scale(1.3) rotate(-45deg);\n opacity: 0;\n pointer-events: none; /* Désactive les interactions */\n}\n\n.sticker .back,\n.sticker .front {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transition: 0.5s;\n}\n\n.sticker .back:before,\n.sticker .front:before {\n content: \" \";\n position: absolute;\n bottom: 0;\n left: 0;\n width: 70px;\n height: 70px;\n border-radius: 50%;\n transition: 0.5s;\n}\n\n.sticker .front {\n height: 0;\n}\n\n.sticker .front .content {\n position: absolute;\n bottom: -0.5px;\n left: -0.5px;\n font-size: 10px;\n font-weight: 800;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 71px;\n height: 71px;\n transform: rotate(25deg);\n border: solid 3px rgb(255, 255, 255);\n background: linear-gradient(\n 234deg,\n rgba(255, 64, 129, 1) 1%,\n rgba(123, 170, 247, 1) 98%\n );\n color: #fff;\n text-align: center;\n border-radius: 50%;\n}\n\n.sticker .back {\n top: 70px;\n overflow: hidden;\n}\n\n.sticker .back:before {\n background-color: #ffffff;\n box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.4);\n top: 0;\n}\n\n/* Lorsque le bouton est coché, activer le sticker */\n.container input:checked ~ .sticker {\n transform: translate3d(0, 0, 0) scale(1) rotate(-45deg);\n transition-delay: 0s;\n opacity: 1;\n pointer-events: all;\n}\n\n.container input:checked ~ .sticker .front {\n height: 130px;\n}\n\n.container input:checked ~ .sticker .back {\n top: 0;\n}\n\n.container input:checked ~ .sticker .back:before {\n top: -134px;\n}\n"}

terrible-catfish-48

👁 实时预览

📝 源代码