鼠标放上去,图片有动画向四周放大

像这种效果:

html代码:

<!-- product show -->
            <div class="product_list ">
                 <ul>
                     <li class="product_img"><a href="#"><img src="images/1.png"></a></li>
                     <li class="product_img"><a href="#"><img src="images/2.png"></a></li>
                     <li class="product_img"><a href="#"><img src="images/3.png"></a></li>
                 </ul>
            </div>
        
<!-- product show end -->

css样式:

/*product*/

.product_list{ width: 1017px;diaplay:block;margin:0 auto; }
.product_list ul{width:1030px;margin-top: 10px;}
.product_list .product_img{ width:335px;height:196px;display:block;float:left;margin-right:5px;margin-bottom:10px; overflow: hidden;}
.product_list .product_img img{ display: block;width:327px;height:187px;}
.product_list .product_img:hover{  -webkit-animation: scaleimg 0.3s alternate  both;
                                        -moz-animation: scaleimg 0.3s alternate  both;
                                        -o-animation:scaleimg 0.3s alternate  both;    
                                         animation:scaleimg 0.3s alternate  both;                                    
}
@-webkit-keyframes scaleimg{
        0%{ -webkit-transform:scale(1);  }
        100%{ -webkit-transform:scale(1.05);  }
}
@-moz-keyframes scaleimg{
        0%{ -moz-transform:scale(1);  }
        100%{ -moz-transform:scale(1.05);  }
}
@-o-keyframes scaleimg{
        0%{ -o-transform:scale(1);  }
        100%{ -o-transform:scale(1.05);  }
}
@keyframes scaleimg{
        0%{ transform:scale(1);  }
        100%{ transform:scale(1.05);  }
}

  100%{ transform:scale(1.05);  }1.05是你要放大的尺寸,也就是放大0.05倍.