{"html":"\n\n \n \n \n \n \n \n \n \n \n

\n\n","css":"#bookmark[type=\"checkbox\"] {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.bookmark {\n overflow: hidden;\n position: absolute;\n left: calc(50% - 24px);\n top: calc(50% - 24px);\n width: 48px;\n height: 48px;\n display: block;\n border-radius: 50%;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n}\n.bookmark:before {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.06);\n border-radius: 50%;\n transform: scale(0.5);\n opacity: 0;\n transition: all 0.2s ease;\n}\n.bookmark:hover:before {\n transform: scale(1);\n opacity: 1;\n}\n.bookmark:active:before {\n transform: scale(0.8);\n transition: all 0.3s ease;\n}\n.bookmark .bookmark-icon {\n margin: 12px;\n}\n.bookmark .bookmark-icon path {\n stroke: black;\n fill: rgba(0, 0, 0, 0);\n}\n\n#bookmark:checked + .bookmark .bookmark-icon {\n animation: booking 0.3s linear forwards;\n}\n#bookmark:checked + .bookmark .bookmark-icon path {\n fill: black;\n transition: all 0.3s ease;\n transition-delay: 0.1s;\n}\n\n.bookmark .shimmer {\n position: absolute;\n inset: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n transform: skew(-13deg) translateX(-110%);\n background: rgba(255, 255, 255, 0.3);\n z-index: 0;\n transition: transform 1s ease;\n}\n.bookmark:hover .shimmer {\n transform: skew(-13deg) translateX(110%);\n}\n\n@keyframes booking {\n 0% {\n transform: rotateY(0) translateY(0) scale(1);\n }\n 50% {\n transform: rotateY(90deg) translateY(-16px) scale(1.1);\n }\n 100% {\n transform: rotateY(180deg) translateY(0) scale(1.2);\n }\n}\n"}

hard-liger-45

👁 实时预览

📝 源代码