思路:
为父级盒子创建双伪元素,将::before伪类元素利用定位,定位到父级盒子的左邻的位置,::after伪类元素定位值不变,当鼠标经过MI这个盒子的时候,让其双伪类元素水平向右移动父级盒子的宽度,最后为父级盒子使用overflow-hidden,隐藏溢出的内容。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 父盒子 */
/* 创建父盒子,宽高与logo图片一致,背景颜色为小米logo的颜色 */
.logo {
overflow: hidden;
position: relative;
width: 49px;
height: 49px;
background-color: #ff6900;
margin: 100px auto;
}
/* 利用css样式中的双伪类选择器创建子类元素,左(home)右(mi-logo) */
/* 注意:伪类元素中必须存在content这个属性,值可以为空 */
/* 宽度高度继承其父类元素 */
/* 利用定位中的子绝父相,为双伪类元素定位,home定位到父级盒子的左邻区域,left值为自身宽度的值 */
/* 利用定位中的子绝父相,为双伪类元素定位,mi-logo,left值为0,不需要移动位置 */
/* 因为只需要水平距离的移动元素,所以双伪类的元素top值为0 */
/* 为双伪元素使用复合背景添加背景图片 */
.logo::before {
content: '';
position: absolute;
left: -49px;
top: 0;
/* 宽高默认继承父级盒子logo */
width: 100%;
height: 100%;
background: url(../images/xiaomi_logo/images/mi-home.png) no-repeat center;
}
/* mi-logo */
/* 利用定位中的子绝父相,为双伪类元素定位,mi-logo,left值为0,不需要移动位置 */
/* 因为只需要水平距离的移动元素,所以双伪类的元素top值为0 */
/* 为双伪元素使用复合背景添加背景图片 */
.logo::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url(../images/xiaomi_logo/images/mi-logo.png) no-repeat center;
}
/* 为左右盒子加入过渡动画 */
.logo::before,
.logo::after {
transition: all .3s;
}
/* 当鼠标经过mi-logo是时候,让双伪元素的盒子各自移动自身宽度的距离,left:49px */
/* 最后让父级盒子隐藏溢出显示的内容overflow-hidden */
.logo:hover::before,
.logo:hover::after {
transform: translate(49px, 0);
}
</style>
</head>
<body>
<div class="logo"></div>
</body>
</html>
在这里插入代码片