{"html":"

\n \n \n \n \n

\n","css":".check {\n cursor: pointer;\n position: relative;\n margin: auto;\n width: 18px;\n height: 18px;\n -webkit-tap-highlight-color: transparent;\n transform: translate3d(0, 0, 0);\n}\n\n.check:before {\n content: \"\";\n position: absolute;\n top: -15px;\n left: -15px;\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background: rgb(33 33 33 / 0%);\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n\n.check svg {\n position: relative;\n z-index: 1;\n fill: none;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke: #c8ccd4;\n stroke-width: 1.5;\n transform: translate3d(0, 0, 0);\n transition: all 0.2s ease;\n}\n\n.check svg path {\n stroke-dasharray: 60;\n stroke-dashoffset: 0;\n}\n\n.check svg polyline {\n stroke-dasharray: 22;\n stroke-dashoffset: 66;\n}\n\n.check:hover:before {\n opacity: 1;\n}\n\n.check:hover svg {\n stroke: #4285f4;\n}\n\n#mute:checked + .check svg {\n stroke: #4285f4;\n}\n\n#mute:checked + .check svg path {\n stroke-dashoffset: 60;\n transition: all 0.3s linear;\n}\n\n#mute:checked + .check svg polyline {\n content: \"done\";\n stroke-dashoffset: 42;\n transition: all 0.2s linear;\n transition-delay: 0.15s;\n border-color: transparent;\n stroke: #5fa212;\n animation: mute 0.6s ease;\n}\n\n@keyframes mute {\n from {\n transform: scale(1, 1);\n }\n\n 30% {\n transform: scale(1.25, 0.75);\n }\n\n 40% {\n transform: scale(0.75, 1.25);\n }\n\n 50% {\n transform: scale(1.15, 0.85);\n }\n\n 65% {\n transform: scale(0.95, 1.05);\n }\n\n 75% {\n transform: scale(1.05, 0.95);\n }\n\n to {\n transform: scale(1, 1);\n }\n}\n"}

average-turkey-0

👁 实时预览

📝 源代码