css--小米商城----logo与home图标切换

:before 、:hover 、transition、transform实例

先来看一下目标是什么，PiuPiu

先整个a

<div class="nav-logo">
	<a href="" class="logo"></a>
</div>

再开始整样式

.page-nav .nav-logo .logo
{
	position: relative;/*这个可以回过头来再看*/
	display: block;
	width: 55px;
	height: 55px;
	background-color: #ff6700;
	overflow:hidden; /*这个也很重要喔，不加会有惊喜*/
}

变成这个亚子

下面就开始今天的核心了，我们要的效果是两个图标排成一排，鼠标上去，左边的图标向右滑入视野（橘黄色的），右边的向右滑出视野

怎么实现呢？小米官网用了 :before 和 :after ,像这个亚子

.nav-logo .logo:after,.nav-logo .logo:before
{
	position: absolute;
	top: 0;
	left: 0;
	height: 55px;
	width: 55px;
	content: "";
	transition: transform .3s;/*这个也很重要喔，加在hover里会有惊喜*/
}

当然他们两个的位置不同，margin-left来解决重叠

.nav-logo .logo:after
{
	background: url(../img/mi-home.png) no-repeat 50% 50%;
	margin-left: -55px;
}
.nav-logo .logo:before
{
	background: url(../img/mi-logo.png) no-repeat 50% 50%;
}

静的这里就结束了，下面要让他动起来，像这亚（transition和transform现学现卖）

.nav-logo .logo:hover:after,.nav-logo .logo:hover:before /*这里面的:hover  与:before 之间不要有空格喔，不然也会有问题喔*/
{
	transform: translate(55px);
}

写到这里，就差不多了，上面注释的地方是自己错过的地方，希望看到的小白不要像我一样再在上面浪费太多时间