CSS Art Gallery

Mask Illustrated Guide

When Taiwan's mask rationing system launched in 2020, we captured that era of nationwide mask shortages with pure CSS: medical masks, activated carbon masks, N95s, and the elusive 'King Mask' that nobody could buy.

載入中… 
<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>
#CSS Art #Pure CSS #2020
Built with Threadspage