CSS Art Gallery
口罩圖鑑
2020 年口罩實名制上路，用純 CSS 畫下那個全民搶口罩的年代：醫療口罩、活性碳口罩、N95、還有「買不到」的國王口罩。
載入中…
<div class="mask-art">
<div class="container">
<div class="prod-wrapper">
<div class="prod-name">醫療口罩</div>
<div class="mask-wrapper">
<div class="mask">
<div class="iron-line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
<div class="desc">可有效阻擋大部分飛沫，適合一般民眾配戴。</div>
</div>
<div class="prod-wrapper">
<div class="prod-name">活性碳口罩</div>
<div class="mask-wrapper">
<div class="carbon-mask">
<div class="iron-line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
<div class="desc">可吸附異味，大多數無法隔絕飛沫，沒有防疫效果。</div>
</div>
<div class="prod-wrapper">
<div class="prod-name">N95 口罩</div>
<div class="mask-wrapper">
<div class="n95-mask">
<div class="iron-line-left"></div>
<div class="iron-line-right"></div>
<div class="filter"></div>
<i class="mark"> Warning 3M</i>
</div>
</div>
<div class="desc">可有效阻絕 95％ 以上的病毒，適合長時間接觸患者的第一線醫療人員配戴。</div>
</div>
<div class="prod-wrapper">
<div class="prod-name">國王的口罩</div>
<div class="mask-wrapper">
<div class="no-mask">
<div class="iron-line"></div>
<div class="line">買不到</div>
</div>
</div>
<div class="desc">身體健康、從事戶外運動，現階段可以不用戴口罩。</div>
</div>
</div>
</div>