{"html":"

\n \n

","css":".printer {\n --border: #00104b;\n --background: #fff;\n cursor: pointer;\n width: 32px;\n height: 18px;\n position: relative;\n}\n\n.printer:before, .printer:after {\n content: \"\";\n position: absolute;\n box-shadow: inset 0 0 0 2px var(--border);\n background: var(--background);\n}\n\n.printer:before {\n left: 0;\n right: 0;\n bottom: 0;\n height: 14px;\n border-radius: 3px;\n z-index: 2;\n}\n\n.printer:after {\n width: 26px;\n height: 6px;\n top: 0;\n left: 3px;\n border-radius: 3px 3px 0 0;\n}\n\n.printer .dot {\n width: 24px;\n height: 2px;\n border-radius: 1px;\n left: 4px;\n bottom: 4px;\n z-index: 4;\n position: absolute;\n background: var(--border);\n}\n\n.printer .dot:before, .printer .dot:after {\n content: \"\";\n position: absolute;\n background: var(--border);\n border-radius: 1px;\n height: 2px;\n}\n\n.printer .dot:before {\n width: 2px;\n right: 0;\n top: -5px;\n}\n\n.printer .dot:after {\n width: 4px;\n right: 3px;\n top: -5px;\n}\n\n.printer .paper {\n position: absolute;\n z-index: 1;\n width: 18px;\n height: 20px;\n border-radius: 2px;\n box-shadow: inset 0 0 0 2px var(--border);\n background: var(--background);\n left: 7px;\n bottom: 10px;\n display: flex;\n justify-content: center;\n transform: perspective(40px) translateY(0) rotateX(4deg) translateZ(0);\n -webkit-animation: paper 1.2s ease infinite;\n animation: paper 1.2s ease infinite;\n -webkit-animation-play-state: var(--state, running);\n animation-play-state: var(--state, running);\n}\n\n.printer .paper .svg {\n display: block;\n width: 8px;\n height: 8px;\n margin-top: 4px;\n}\n\n.printer .output {\n width: 32px;\n height: 24px;\n pointer-events: none;\n top: 13px;\n left: 0;\n z-index: 3;\n overflow: hidden;\n position: absolute;\n}\n\n.printer .output .paper-out {\n position: absolute;\n z-index: 1;\n width: 18px;\n height: 20px;\n border-radius: 2px;\n box-shadow: inset 0 0 0 2px var(--border);\n background: var(--background);\n left: 7px;\n bottom: 0;\n transform: perspective(40px) rotateX(40deg) translateY(-12px) translateZ(6px);\n -webkit-animation: paper-out 1.2s ease infinite;\n animation: paper-out 1.2s ease infinite;\n -webkit-animation-play-state: var(--state, running);\n animation-play-state: var(--state, running);\n}\n\n.printer .output .paper-out:before {\n content: \"\";\n position: absolute;\n left: 3px;\n top: 4px;\n right: 3px;\n height: 2px;\n border-radius: 1px;\n opacity: 0.5;\n background: var(--border);\n box-shadow: 0 3px 0 var(--border), 0 6px 0 var(--border);\n}\n\n.printer:not(:hover) {\n --state: paused;\n}\n\n@-webkit-keyframes paper {\n 50% {\n transform: translateY(10px) translateZ(0);\n }\n}\n\n@keyframes paper {\n 50% {\n transform: translateY(10px) translateZ(0);\n }\n}\n\n@-webkit-keyframes paper-out {\n 50% {\n transform: perspective(40px) rotateX(30deg) translateY(-4px) translateZ(6px);\n }\n}\n\n@keyframes paper-out {\n 50% {\n transform: perspective(40px) rotateX(30deg) translateY(-4px) translateZ(6px);\n }\n}\n"}

cold-dodo-65

👁 实时预览

📝 源代码