鼠标经过图片会移动（css3过渡，overflow：hidden）

最新推荐文章于 2022-06-23 11:42:11 发布

weixin_30483013

最新推荐文章于 2022-06-23 11:42:11 发布

阅读量596

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/EricZLin/p/8867411.html

本文介绍了一个使用CSS实现的简单过渡效果案例。通过设置图片的移动距离，在鼠标悬停时产生平滑过渡。此效果适用于网站按钮或其他交互元素，增强用户体验。

效果图如下：

代码：

<body>
    <div><img src="jd.jpg"></div>
</body>

       img{
            width: 250px;
            height: 250px;
            transition: all 0.6s;/* 过渡效果，图片实现效果，写在图片上 */
        }
        div{
            width: 240px;/* 宽度比图片宽度少10px */
            height: 250px;
            border: 1px solid rgb(194, 188, 188);
            overflow: hidden;/*图片超过部分切掉  */
        }
        div:hover img{
            margin-left: -10px;/* 鼠标经过盒子，图片向左移动10px */
        }