定位position+过渡transition实现扫一扫效果

案例分析：
一开始只显示第一张图片，当鼠标悬停时不断地去切换不同的图片
如果是插入的图片那么我们一开始将会显示所有的图片,但是人家最终的效果一开始的时候只显示第一张图片如何实现？
我们可以使用背景图片的方式去实现
默认情况下只显示图片的左上角
元素的大小只能显示第一张图片，当我们鼠标悬停的时候让背景图片不断向上移动可以去切换不同的图片
background-position：0 -1500px；
/*
背景图片向上走是负值（要有向上的效果，则图片向下走）
background-position有两个值，第一个值表示水平方向，正值向左，负值向右；第二个值表示垂直方向，正值向上，负值向下
*/
想要看到变化的过程，需要添加过渡属性 transition
<!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

 
posted @ 2020-12-08 19:14  小月亮的进阶  阅读(350)  评论(0)    收藏  举报