css部分
<style>
.bar {
width: 150px;
height: 15px;
border: 1px solid red;
border-radius: 12px;
}
.bar_in {
width: 50%;
height: 100%;
background-color: red;
border-radius: 12px;
}
.bar:hover .bar_in {
width: 100%;
transition: all ease 0.3s;
}
.logo {
margin: 50px;
width: 60px;
height: 60px;
background-color: orange;
overflow: hidden; //将溢出部分隐藏
}
.log_in {
position: relative;
width: 120px;
height: 60px;
left: 5px;
/* background-color: blue; */
}
.logo .log_in .first {
float: left;
width: 40px;
height: 40px;
margin: 5px;
background-color: yellow;
}
.logo .log_in .second {
float: left;
width: 40px;
height: 40px;
margin: 5px;
background-color: green;
}
.log_in:hover {
left: -45px; //移动盒子left
transition: all ease .5s;
}
</style>
html部分
<div class="bar">
<div class="bar_in"></div>
</div>
<div class="logo">
<div class="log_in">
<div class="first">小米logo1</div>
<div class="second">小米logo2</div>
</div>
</div>
![](https://img-blog.csdnimg.cn/98b857cd5e9e4689be05b67e50b62af0.png)
![](https://img-blog.csdnimg.cn/91a2711c3975436485a88c2746c66760.png)