在 CSS 中，模擬掃描的效果可以通過使用<pre>標簽來實現，這個標簽可以在文本的前后添加多個自定義元素，通過利用這個特性來模擬掃描效果。

我們可以通過如下代碼來模擬一個掃描效果：

<div class="scan-effect">
<span class="line"></span>
<span class="point"></span>
<span class="text">正在掃描中，請稍候...</span>
</div>

通過為<div>和每一個自定義元素設置樣式，我們可以實現一個類似于掃描的效果：

.scan-effect {
position: relative;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
}
.line {
position: absolute;
left: 0;
width: 0;
height: 2px;
background: #fff;
animation: scan 2s linear infinite;
}
.point {
position: absolute;
top: -5px;
left: 0;
width: 10px;
height: 10px;
border-radius: 50%;
background: #fff;
animation: scan 2s linear infinite;
}
.text {
font-size: 20px;
color: #fff;
padding: 0 20px;
}
@keyframes scan {
0% {
width: 0;
}
20% {
width: 20%;
}
40% {
width: 40%;
}
60% {
width: 60%;
}
80% {
width: 80%;
}
100% {
width: 100%;
}
}

以上樣式代碼中，設置了一個標記為scan-effect的<div>作為容器，在容器內部設置了三個自定義元素：線條、點和文本，其中<span>標簽用于設置自定義元素。

通過為自定義元素設置相關樣式，我們可以實現一個類似掃描的效果，其中關鍵部分是@keyframes關鍵字，它可以用來設置 CSS 動畫。

本文只是一個簡單的 CSS 掃描效果演示，您也可以嘗試使用其他效果搭配創意個性化的頁面展示。