本文重要先容了html css 图片扫描仪，分享给各人，具体如下： 效果： 这样，有抖动的：
无抖动的：
实现：1.界说一个盒子： [code] <body> <div class="tu"></div> </body> [/code]2.根本样式，长宽配景图等等~ [code] .tu{ width: 500px; height: 300px; background-image: url(8.jpg); background-size: 100% auto; background-repeat: no-repeat; position: relative; overflow: hidden; cursor: pointer; } [/code]cursor: pointer;鼠标经过盒子样式为小手 3.用伪类元素做扫描线，根本样式： [code] .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; } [/code]filter: sepia(100%); 图片发黄。 4.实现扫描： [code] .tu:hover::after{ opacity: 1; animation: move 1.8s linear infinite; } @keyframes move{ 0%{ top: 0; background-position: 6px 0px; } 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; } } [/code]让background-position的y轴位移刚好等于top的间隔，然后x轴为0的话就不抖，有数值就会抖动。 完整代码： [code] <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="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: move 1.8s linear infinite; } @keyframes move{ 0%{ top: 0; background-position: 6px 0px; } 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> <div class="tu"></div> </body> </html> [/code]总结：这是网上看到一外国博主的创意，然后自己也弄了一个，虽然效果是比力简单的，但也是挺好玩的~ 到此这篇关于html+css实现图片扫描仪殊效 的文章就先容到这了,更多相关html+css图片扫描仪 内容请搜索脚本之家以前的文章或继续欣赏下面的相关文章，希望各人以后多多支持脚本之家！ 来源：https://www.jb51.net/html5/767898.html 免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
/6 
|手机版|小黑屋|梦想之都-俊月星空
( 粤ICP备18056059号 )|网站地图
GMT+8, 2025-7-2 03:34 , Processed in 0.029736 second(s), 18 queries .
Powered by Mxzdjyxk! X3.5
© 2001-2025 Discuz! Team.
