-
题目描述
当鼠标移入到logo上的时候,左侧会滑出一个小房子,当鼠标移出logo的时候,恢复成原来的样子,并且中间的切换是有动画的 -
实现思路
(1)设置一个盒子的大小和logo图片的大小一样
(2)再给盒子加伪元素 before 和after
(3)给两个伪元素添加定位,使home图片的盒子位于盒子的右边
(4)谁过渡给谁加。两个伪元素都要过渡,两个都加
(5)采用hover的时候盒子移动 -
实现代码
(1)HTML
<div class="logo"></div>
(2)CSS
<style>
* {
margin: 0;
padding: 0;
}
.logo {
position: relative;
margin: 100px auto;
width: 49px;
height: 49px;
line-height: 100px;
background-color: #ff6700;
}
.logo::before {
content: "";
position: absolute;
width: 49px;
height: 49px;
background: url(images/mi-logo.png) no-repeat center;
}
.logo::after {
content: "";
position: absolute;
top: 0;
left: 49px;
width: 49px;
height: 49px;
transition: all 0.5s;
background: url(images/mi-home.png) no-repeat right;
}
.logo:hover::after {
left: 0;
}
.logo:hover::before {
left: -49px;
}