这篇文章将为大家详细讲解有关如何使用html+css实现图片扫描仪特效，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

实现：

1.定义一个盒子：

<body><divclass="tu"></div></body>

2.基本样式，长宽背景图等等~

.tu{width:500px;height:300px;background-image:url(8.jpg);background-size:100%auto;background-repeat:no-repeat;position:relative;overflow:hidden;cursor:pointer;}

cursor: pointer;鼠标经过盒子样式为小手

3.用伪类元素做扫描线，基本样式：

.tu::after{content:'';position:absolute;top:0;left:0;width:500px;height:35px;background-image:url(8.jpg);background-size:100%auto;background-repeat:no-repeat;filter:sepia(100%);opacity:0;}

filter: sepia(100%); 图片发黄。
filter: invert(100%); 像X光底片。

4.实现扫描：

.tu:hover::after{opacity:1;animation:move1.8slinearinfinite;}@keyframesmove{0%{top:0;background-position:6px0px;}20%{top:60px;background-position:-6px-60px;}40%{top:120px;background-position:6px-120px;}60%{top:180px;background-position:-6px-180px;}80%{top:240px;background-position:6px-240px;}100%{top:300px;background-position:-6px-300px;}}

让background-position的y轴位移刚好等于top的距离，然后x轴为0的话就不抖，有数值就会抖动。

完整代码：

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><style>*{margin:0;padding:0;box-sizing:border-box;}body{height:100vh;display:flex;justify-content:center;align-items:center;background-color:rgb(0,0,0);}.tu{width:500px;height:300px;background-image:url(8.jpg);background-size:100%auto;background-repeat:no-repeat;position:relative;overflow:hidden;cursor:pointer;}.tu::after{content:'';position:absolute;top:0;left:0;width:500px;height:20px;background-image:url(8.jpg);background-size:100%auto;background-repeat:no-repeat;filter:invert(100%);opacity:0;}.tu:hover::after{opacity:1;animation:move1.8slinearinfinite;}@keyframesmove{0%{top:0;background-position:6px0px;}20%{top:60px;background-position:-6px-60px;}40%{top:120px;background-position:6px-120px;}60%{top:180px;background-position:-6px-180px;}80%{top:240px;background-position:6px-240px;}100%{top:300px;background-position:-6px-300px;}}</style></head><body><divclass="tu"></div></body></html>

关于“如何使用html+css实现图片扫描仪特效”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。