{"html":"

\n \n\n

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

\n","css":".wrapper {\n position: relative;\n}\n\n.btn-delete {\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n user-select: none;\n border: none;\n border-radius: 10px;\n padding: 0.5rem 1.4rem 0.5rem 1rem;\n background-color: rgb(255, 0, 0);\n background-image: radial-gradient(circle at 50% -50%, #fff, 10%, #0000);\n\n font-family: \"Inter\", sans-serif;\n font-weight: 600;\n font-size: 0.9em;\n color: #fff;\n cursor: pointer;\n\n box-shadow:\n 0px 1px 1px rgba(3, 7, 18, 0.16),\n 0px 3px 4px rgba(3, 7, 18, 0.14),\n 0px 7px 9px rgba(3, 7, 18, 0.11),\n 0px 12px 16px rgba(3, 7, 18, 0.09),\n 0px 19px 26px rgba(3, 7, 18, 0.07),\n 0px 27px 37px rgba(3, 7, 18, 0.05),\n 0px 37px 50px rgba(3, 7, 18, 0.02);\n transition:\n box-shadow 0.3s ease,\n transform 0.15s ease;\n}\n\n.btn-delete::after,\n.btn-delete::before {\n content: \"\";\n position: absolute;\n top: calc(50% - 10px);\n left: 0px;\n width: 10px;\n aspect-ratio: 1 / 2;\n border-radius: 35%;\n background-color: inherit;\n opacity: 1;\n transition:\n left 0.3s ease,\n right 0.3s ease,\n opacity 0.3s ease;\n}\n.btn-delete::after {\n left: auto;\n right: 0px;\n}\n\n.btn-svg {\n width: 24px;\n height: 24px;\n fill: #fff9;\n stroke: #fff0;\n transition: transform 0.3s ease;\n}\n\n.btn-delete:hover {\n box-shadow:\n 0px 3px 4px rgba(3, 7, 18, 0.13),\n 0px 14px 17px rgba(3, 7, 18, 0.11),\n 0px 31px 38px rgba(3, 7, 18, 0.09),\n 0px 55px 67px rgba(3, 7, 18, 0.07),\n 0px 86px 105px rgba(3, 7, 18, 0.06),\n 0px 124px 151px rgba(3, 7, 18, 0.04),\n 0px 169px 206px rgba(3, 7, 18, 0.02);\n\n transform: scale(1.07);\n}\n\n.btn-delete:hover .btn-svg {\n transform: rotate(-8deg) scale(1.8);\n}\n\n.btn-delete:hover::after {\n opacity: 1;\n right: -4px;\n}\n.btn-delete:hover::before {\n opacity: 1;\n left: -4px;\n}\n\n.btn-delete:active::after {\n right: 0px;\n}\n.btn-delete:active::before {\n left: 0px;\n}\n\n.document {\n z-index: -1;\n position: absolute;\n top: -180%;\n left: 50%;\n width: 78%;\n height: 160px;\n background-color: #fff;\n border: 1px solid #0002;\n transform: translate(-50%, 0%) scale(0);\n transition:\n transform 0.3s ease,\n opacity 1s ease;\n filter: drop-shadow(0 0 5px #0001);\n opacity: 0;\n}\n\n.btn-delete:hover ~ .document {\n transform: translate(-50%, -30%) scale(1);\n opacity: 1;\n}\n\n.btn-delete:focus ~ .document {\n animation: feed 1.5s forwards;\n transform: translate(-50%, -50%) scale(1);\n}\n\n.shredded {\n position: absolute;\n z-index: -1;\n stroke: #fff;\n fill: none;\n stroke-width: 0;\n filter: drop-shadow(0 0 5px #0001);\n}\n\n.btn-delete:focus ~ .shredded {\n animation: shred 1.5s cubic-bezier(1, 0.6, 0.6, 1) reverse;\n}\n\n@keyframes feed {\n 0% {\n clip-path: inset(0% 0% 0% 0%);\n }\n 100% {\n clip-path: inset(100% 0% 0% 0%);\n }\n}\n\n@keyframes shred {\n 0% {\n stroke-width: 9;\n opacity: 0;\n clip-path: inset(0% 0% 0% 0%);\n }\n 30% {\n opacity: 1;\n }\n 100% {\n stroke-width: 9;\n clip-path: inset(0% 0% 100% 0%);\n }\n}\n"}

sharp-mayfly-40

👁 实时预览

📝 源代码