web前端鼠标放在div标签制成的盒子上如何实现图片一秒内由正方形变为圆形在变？

Question

如题所述

Answer 1

1、使用css来控制变化，即给图片添加css样式
2、在图片样式绑定:hover事件，控制图片在鼠标悬停时变化
//定义动画
@-webkit-keyframes imgChange
{
0%{border-radius:0%;}
50%{border-radius:50%;}
100%{border-radius:0%;}
}
img:hover{
-webkit-animation-name:imgChange;
-webkit-animation-duration:1s;
-webkit-animation-timing-function:linear;
}