米兔过渡动画的练习

最新推荐文章于 2024-10-18 11:46:13 发布

m0_51396253

最新推荐文章于 2024-10-18 11:46:13 发布

阅读量150

点赞数

文章标签：动画 css html

本文链接：https://blog.csdn.net/m0_51396253/article/details/120491508

版权

使用background-position定位时，正值是指图片向右移动

默认的位置是图片的左上角

<title>米兔的练习</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width:112px;
            height:230px ;
            background-image: url(./练习的截图/mitu.jpg);
            margin: 0 auto;
            background-position: 0 0;
            transition: 0.3s steps(3);

        }
        .box1:hover{
            background-position: -336px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>