CSS 掃碼效果是一種常見的網頁設計效果，可以簡單地實現二維碼掃描的效果。下面我們就來學習一下如何使用 CSS 來制作掃碼效果。

/*CSS 代碼*/
.scan-container {
position: relative;
width: 150px;
height: 150px;
margin: 0 auto;
}
.scan-frame {
border: 10px solid #fff;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
}
.scan-frame:before {
content: "";
position: absolute;
top: -10px;
left: -10px;
width: 100%;
height: 100%;
border: 1px dashed #fff;
}
.scan-frame:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30%;
height: 30%;
background: #fff;
}
.scan-inner {
position: absolute;
top: -10px;
left: -10px;
width: 100%;
height: 100%;
border: 1px dashed #000;
box-sizing: border-box;
animation: scanMove 2s linear infinite;
}
.scan .scan-light {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 10%;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
animation: scanLight 2s linear infinite;
}
@keyframes scanMove {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(100%);
}
}
@keyframes scanLight {
0% {
background-position: -100%;
}
100% {
background-position: 100%;
}
}

以上是一個制作 CSS 掃碼效果的示例代碼。我們可以將這段代碼放在網頁的 head 標簽中或是單獨的 CSS 文件里。

通過以上代碼，我們給出了一個寬高為 150px 的掃碼效果容器，通過盒模型來控制邊框的樣式。我們先將二維碼的邊框給定為 1px 虛線，邊框到容器的距離再進行相應的微調，從而達到與真實二維碼相似的樣式。

接下來是實現一紅一綠兩條移動的光線。其中紅色光線通過在容器內部移動實現，而綠色光線則是在容器外部進行無限循環的移動，整個掃碼效果細節十分完美。

整體來看，以上代碼實現掃碼效果的原理是：利用動畫實現內外兩條光線進行移動，讓掃描儀斜切通過二維碼的邊框，當然因為是簡化版的掃碼效果，實際使用依然要進行多方面的調整，但是通過這個基礎版的示例代碼，相信大家會很快上手實現自己所需的掃碼效果。