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

html-css09

web前端鼠标放在div标签制成的盒子上如何实现图片一秒内由正方形变为圆形在变？,第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

}

css3的圆角样式

border-radius就可以做到了，

圆形，就把四个角都设置成宽高的一半，就是50%，或者是固定值，，

注意的是，如果你是直接用Img标签的话，那你的Img

宽高要一样，就是说要是正方形，

如果你是通过容器来实现的话，你就直接把容器设置成正方形，border-radius:50%然后再background图片就可以了。