CSS炫酷掃描圖是一種很有趣的特效，讓網(wǎng)頁內(nèi)容看起來更加生動和有趣。這種效果可以通過一些簡單的CSS代碼實現(xiàn)。

.scan {
position: relative;
width: 450px;
height: 300px;
margin: 50px auto;
background: linear-gradient(to bottom, #444, #222);
color: #eee;
font-family: 'Oswald', sans-serif;
font-size: 4em;
text-align: center;
line-height: 300px;
}
.scan span {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: linear-gradient(to top, transparent, #fff 50%);
transform: skewY(-12deg);
animation: scan 3s ease-in-out infinite;
}
@keyframes scan {
0% {
transform: skewY(-12deg) translateX(-100%);
}
50% {
transform: skewY(-12deg) translateX(100%);
}
100% {
transform: skewY(-12deg) translateX(-100%);
}
}

以上代碼中，我們創(chuàng)建了一個名為“scan”的類，將其位置設(shè)置為相對，寬度和高度均為450px和300px，并將其放置在網(wǎng)頁中央。我們還為其設(shè)置了一個漸變背景色。接下來，我們?yōu)槠渲械奈淖衷O(shè)置了字體樣式和大小，并且將行高設(shè)置為300px，使其與框高相等。

然后，我們給“scan”類中的“span”元素設(shè)置了絕對定位，并且將其“transform: skewY(-12deg)”屬性設(shè)置為傾斜12個單位。這樣，我們將創(chuàng)建一個具有掃描線效果的元素。我們還為該元素設(shè)置了漸變背景色，并將其動畫設(shè)置為了scan，使其持續(xù)3秒鐘，并且循環(huán)播放。

最終的效果如下所示：

通過以上這個簡單的代碼，我們就可以輕松地為網(wǎng)頁中的文本添加炫酷的掃描圖效果了。