分享两种鼠标经过图标过渡的做法

最新推荐文章于 2022-11-26 07:00:00 发布

都来我家吃饭

最新推荐文章于 2022-11-26 07:00:00 发布

阅读量281

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_42375485/article/details/118278069

版权

本文介绍了两种通过CSS实现鼠标经过图标过渡的方法：一是使用精灵图的定位技术，二是利用浮动、左移和overflow：hidden属性。这两种方法都可以达到图标切换的动画效果。

摘要由CSDN通过智能技术生成

前要-答主目前自学阶段-

跟着B站Pink老师的视频做作业，P296级的一个小作业

第一种方法：精灵图的定位做法

事先将需要的两个图片用PS进行合成排列在一起，如下：

    <style>
        .logo {
            width: 57px;
            height: 56px;
            background-image: url(./images/xiaomiall.jpg);
            background-position: top left;
            transition: all .3s;
        }

        .logo:hover {
            background-position: top right;
        }
    </style>


<body>
    <div class="logo"></div>
</body>

方法二：利用浮动，左移，overflow：hidden<

最低0.47元/天解锁文章

都来我家吃饭

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享两种鼠标经过图标过渡的做法

前要-答主目前自学阶段-跟着B站Pink老师的视频做作业，P296级的一个小作业第一种方法：精灵图的定位做法事先将需要的两个图片用PS进行合成排列在一起，如下： <style> .logo { width: 57px; height: 56px; background-image: url(./images/xiaomiall.jpg); backgroun
复制链接

扫一扫