background-position：0 -1500px；
/*
背景图片向上走是负值（要有向上的效果，则图片向下走）
background-position有两个值，第一个值表示水平方向，正值向左，负值向右；第二个值表示垂直方向，正值向上，负值向下
*/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{margin: 0;padding: 0;} div{ width: 150px; height: 150px; background:url("ren.jpg"); } div:hover{ background-position:0 -3000px; transition:3s steps(20); /* 将transition设置在hover里只有鼠标悬停时有效果，离开时没有 */ } </style> </head> <body> <div> <!-- <img src="ren.jpg"> --> </div> </body> </html>
ren.jpg
定位position+过渡transition实现扫一扫效果
原文：https://www.cnblogs.com/mooncareer/p/14105016.html