第一种是用 css 写的
.links-cont {
border: 1px solid #dcbe6e;
height: 210px;
width: 1100px;
padding: 30px 30px;
overflow: hidden;
background-color: #ffffff;
}
.links-cont .links-logo {
width: 120px;
height: 60px;
margin: 0 14px 34px 14px;
text-align: center;
float: left;
}
.links-cont .links-logo img{
width:120px;
height:60px;
}
.logo{
display:inline-block;
transition: all 3s ease-in;
-moz-transition: all 3s ease-in;
-webkit-transition: all 3s ease-in;
}
.logo:hover{
transform:translateY(-200px);
animation-play-state:running;
}
<div class="links-cont">
<div class="logo">
<div class="links-logo">
<img src="http://pic.58pic.com/58pic/13/19/32/38Q58PIC8Ek_1024.jpg" alt="">
</div>
<div class="links-logo">
<img src="http://pic.58pic.com/58pic/13/19/32/38Q58PIC8Ek_1024.jpg" alt="">