鼠标悬停在图片的时候图片放大再还原
1.html:
<div class="row row-padded-mb">
<div class="col-md-12 yicheng">
<a href="./CH/time2.html"><img src="images/2.jpg" style="width: 270px; margin-left:10px; "></a>
<a href="./CH/time.html"><img src="images/3.jpg" style="width: 270px; margin-left:10px;"></a>
<a href="./CH/mainplace.html"><img src="images/1.jpg" style="width: 270px; margin-left:10px;"></a>
<a href="./CH/main.html"><img src="images/4.jpg" style="width: 270px; margin-left:10px;"></a>
</div>
</div>
2.css:
.yicheng{
overflow: hidden;
}
.yicheng img{
cursor: pointer;
transition: all 0.6s;
}
.yicheng img:hover {
animation-name: pic; /*动画名字是pic,与上面定义的名字一样*/
animation-duration: 1s; /*动画用时1s*/
}
@-webkit-keyframes pic {
60% {
-webkit-transform:scale(1.2);
}
}
@-moz-keyframes pic {
60% {
-moz-transform:scale(1.2);
}
}