html怎么做小米logo,案例：纯CSS小米logo样式

实现效果

鼠标放上时向右滚动显示主页icon。

设计思路

定义一个只有单个logo大小的盒子，背景为小米橙色。

然后将两张图片用绝对定位的方式脱标排成一排，顺序是主页icon在前，小米logo在后，注意子绝父相。

此时呈现的是主页icon，给主页icon一个等于其宽度的负的margin-left，就会呈现小米logo。

给logo盒子添加hover效果，鼠标放上时margin-left为0，鼠标离开时还原。

给logo盒子添加transition过渡效果，可以是margin,也可以是all，(这里偷懒只写了all)，还有动画所需的时间(这里为0.2s)。

给logo盒子添加溢出隐藏属性overflow:hidden;大功告成。

代码

注:仅做学习使用，切勿侵权。

小米图标

*{

margin: 0;

padding: 0;

}

body{

background-color: skyblue;

}

.logo{

overflow: hidden;

position: relative;

margin: 100px auto;

width: 55px;

height: 55px;

background-color: #ff6700;

}

/*方法二：伪元素法*/

.logo::after,.logo::before{

/*float: left;*/

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 1;

content: '';

background: url("mi-logo.png") no-repeat center;

transition: all .2s;

}

.logo::after{

margin-left: -55px;

background: url("mi-home.png") no-repeat center;

}

.logo:hover::after{

margin-left: 0;

}

.logo:hover::before{

margin-left: 55px;

}