怎么做出这样的动画效果，用hover可以吗

Question

网站地址，http://f2er.club/，左上角那个小动画效果，请问用什么办法实现最好呢？

Answer 1

可以
测试

Answer 2

在firefox,chrome上很容易知道是怎么实现的，这是那部分的css代码：
.main_title .logo{

width: 300px;

}
.main_title .logo a{

display:block;
position: relative;
color: #FFF;

}

.main_title i{

position: absolute;
width: 60px;
height: 60px;
 transition:.5s;

}
.main_title .red{

background: url(../img/logo_icon_r.png) no-repeat;
background-size: 60px;
left: 20px;
top:-10px;

}
.main_title .blue{

background: url(../img/logo_icon_b.png) no-repeat;
background-size: 60px;
left: 5px;
top:15px;

}
.main_title .green{

background: url(../img/logo_icon_g.png) no-repeat;
background-size: 60px;
left: 35px;
top:15px;

}
.logo a:hover .red{

top:0px;

}
.logo a:hover .blue{

top:0px;
left: -5px;

}
.logo a:hover .green{

top:0px;
left: 45px;

}

了解css(3)的相关知识的话，很容易理解。

Answer 3

他就是用的hover加transition做的呀。