HTML5+CSS3 Pink老师课后作业——小米logo过渡切换的实现

北冥有大鹏

已于 2022-04-23 10:44:05 修改

阅读量1.3k

点赞数

分类专栏：问题类文章标签： css

于 2022-04-23 10:13:41 首次发布

本文链接：https://blog.csdn.net/weixin_45328723/article/details/124359643

版权

问题类专栏收录该内容

10 篇文章 0 订阅

订阅专栏

pink老师课后作业——小米logo过渡切换实现

在这里插入图片描述

基本思路

精灵图技术+伪类元素+过渡
准备一个div盒子设置放置图标的宽高。
当鼠标经过的时候，通过伪类，精灵图切换为另一张图片
PS:图片是自己使用ps切出来的
在这里插入图片描述

代码部分

HTML：

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

</body>

CSS:

<style>
        .xmlg {
            width: 207px;
            height: 207px;
            margin: 0 auto;
            margin-top: 100px;
            background: url(../img/ximilogo.png);
            transition: all 0.5s;
        }
       .xmlg:hover{
           background: url(../img/ximilogo.png) no-repeat -246px,0px;
           transition: all 0.5s;
       }
    </style>

演示效果：
请添加图片描述

北冥有大鹏

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
4
评论
HTML5+CSS3 Pink老师课后作业——小米logo过渡切换的实现

pink老师课后作业——小米logo过渡切换实现基本思路精灵图技术+伪类元素+过渡准备一个div盒子设置放置图标的宽高。当鼠标经过的时候，通过伪类，精灵图切换为另一张图片PS:图片是自己使用ps切出来的代码部分HTML：<body> <div class="xmlg"> </div></body>CSS:<style> .xmlg { width: 207px;
复制链接

扫一扫