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>
演示效果: