css炫酷扫描图 |css兼容各浏览器

.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%);
}
}

以上代码中，大家创建了一个名为“scan”的类，将其位置设置为相对，宽度和高度均为450px和300px，并将其放置在网页中央。大家还为其设置了一个渐变背景色。接下来，大家为其中的文字设置了字体样式和大小，并且将行高设置为300px，使其与框高相等。

然后，大家给“scan”类中的“span”元素设置了绝对定位，并且将其“transform: skewY(-12deg)”属性设置为倾斜12个单位。这样，大家将创建一个具有扫描线效果的元素。大家还为该元素设置了渐变背景色，并将其动画设置为了scan，使其持续3秒钟，并且循环播放。

最终的效果如下所示：

通过以上这个简单的代码，大家就可以轻松地为网页中的文本添加炫酷的扫描图效果了。