仿小米logo
图片链接:https://www.mi.com/
代码如下:
<style>
.header-logo {
position: relative;
}
/* 设置a标签的样式 */
.logo {
display: block;
width: 55px;
height: 55px;
overflow: hidden;
background-color: #ff6700;
text-align: left;
text-indent: -9999em;
}
/* mi logo的样式 */
.logo::before {
/* 定位 */
position: absolute;
/* 伪元素必须要设置content属性 */
content: '';
/* 左偏移 */
left: 0;
/* 上偏移 */
top: 0;
width: 55px;
height: 55px;
/* 设置过渡 */
transition: all .3s;
/* 背景图片 */
background: url(./images/mi-logo.png) no-repeat center center;
/* 透明度 */
opacity: 1;
}
/* mi home 的样式 */
.logo::after {
position: absolute;
content: '';
left: 0;
top: 0;
width: 55px;
height: 55px;
transition: all .3s;
background: url(./images/mi-home.png) no-repeat center center;
margin-left: -55px;
opacity: 0;
}
/* 鼠标移入 让mi logo 往右侧进行滑动 */
.logo:hover::before {
opacity: 0;
margin-left: 55px;
}
/* 鼠标移入 让mi home 回到盒子中间 */
.logo:hover::after {
opacity: 1;
margin-left: 0;
}
</style>
没什么好分析的2333