پیشنمایش زنده
کد HTML
<div class="printer">
<div class="paper">
<svg viewBox="0 0 8 8" class="svg">
<path fill="#0077FF" d="M6.28951 1.3867C6.91292 0.809799 7.00842 0 7.00842 0C7.00842 0 6.45246 0.602112 5.54326 0.602112C4.82505 0.602112 4.27655 0.596787 4.07703 0.595012L3.99644 0.594302C1.94904 0.594302 0.290039 2.25224 0.290039 4.29715C0.290039 6.34206 1.94975 8 3.99644 8C6.04312 8 7.70284 6.34206 7.70284 4.29715C7.70347 3.73662 7.57647 3.18331 7.33147 2.67916C7.08647 2.17502 6.7299 1.73327 6.2888 1.38741L6.28951 1.3867ZM3.99679 6.532C2.76133 6.532 1.75875 5.53084 1.75875 4.29609C1.75875 3.06133 2.76097 2.06018 3.99679 2.06018C4.06423 2.06014 4.13163 2.06311 4.1988 2.06905L4.2414 2.07367C4.25028 2.07438 4.26057 2.0758 4.27406 2.07651C4.81533 2.1436 5.31342 2.40616 5.67465 2.81479C6.03589 3.22342 6.23536 3.74997 6.23554 4.29538C6.23554 5.53084 5.23439 6.532 3.9975 6.532H3.99679Z"></path>
<path fill="#0055BB" d="M6.756 1.82386C6.19293 2.09 5.58359 2.24445 4.96173 2.27864C4.74513 2.17453 4.51296 2.10653 4.27441 2.07734C4.4718 2.09225 5.16906 2.07947 5.90892 1.66374C6.04642 1.58672 6.1743 1.49364 6.28986 1.38647C6.45751 1.51849 6.61346 1.6647 6.756 1.8235V1.82386Z"></path>
</svg>
</div>
<div class="dot"></div>
<div class="output">
<div class="paper-out"></div>
</div>
</div>
کد CSS
.printer {
--border: #00104b;
--background: #fff;
cursor: pointer;
width: 32px;
height: 18px;
position: relative;
}
.printer:before, .printer:after {
content: "";
position: absolute;
box-shadow: inset 0 0 0 2px var(--border);
background: var(--background);
}
.printer:before {
left: 0;
right: 0;
bottom: 0;
height: 14px;
border-radius: 3px;
z-index: 2;
}
.printer:after {
width: 26px;
height: 6px;
top: 0;
left: 3px;
border-radius: 3px 3px 0 0;
}
.printer .dot {
width: 24px;
height: 2px;
border-radius: 1px;
left: 4px;
bottom: 4px;
z-index: 4;
position: absolute;
background: var(--border);
}
.printer .dot:before, .printer .dot:after {
content: "";
position: absolute;
background: var(--border);
border-radius: 1px;
height: 2px;
}
.printer .dot:before {
width: 2px;
right: 0;
top: -5px;
}
.printer .dot:after {
width: 4px;
right: 3px;
top: -5px;
}
.printer .paper {
position: absolute;
z-index: 1;
width: 18px;
height: 20px;
border-radius: 2px;
box-shadow: inset 0 0 0 2px var(--border);
background: var(--background);
left: 7px;
bottom: 10px;
display: flex;
justify-content: center;
transform: perspective(40px) translateY(0) rotateX(4deg) translateZ(0);
-webkit-animation: paper 1.2s ease infinite;
animation: paper 1.2s ease infinite;
-webkit-animation-play-state: var(--state, running);
animation-play-state: var(--state, running);
}
.printer .paper .svg {
display: block;
width: 8px;
height: 8px;
margin-top: 4px;
}
.printer .output {
width: 32px;
height: 24px;
pointer-events: none;
top: 13px;
left: 0;
z-index: 3;
overflow: hidden;
position: absolute;
}
.printer .output .paper-out {
position: absolute;
z-index: 1;
width: 18px;
height: 20px;
border-radius: 2px;
box-shadow: inset 0 0 0 2px var(--border);
background: var(--background);
left: 7px;
bottom: 0;
transform: perspective(40px) rotateX(40deg) translateY(-12px) translateZ(6px);
-webkit-animation: paper-out 1.2s ease infinite;
animation: paper-out 1.2s ease infinite;
-webkit-animation-play-state: var(--state, running);
animation-play-state: var(--state, running);
}
.printer .output .paper-out:before {
content: "";
position: absolute;
left: 3px;
top: 4px;
right: 3px;
height: 2px;
border-radius: 1px;
opacity: 0.5;
background: var(--border);
box-shadow: 0 3px 0 var(--border), 0 6px 0 var(--border);
}
.printer:not(:hover) {
--state: paused;
}
@-webkit-keyframes paper {
50% {
transform: translateY(10px) translateZ(0);
}
}
@keyframes paper {
50% {
transform: translateY(10px) translateZ(0);
}
}
@-webkit-keyframes paper-out {
50% {
transform: perspective(40px) rotateX(30deg) translateY(-4px) translateZ(6px);
}
}
@keyframes paper-out {
50% {
transform: perspective(40px) rotateX(30deg) translateY(-4px) translateZ(6px);
}
}