html5 css3 鼠标悬停图片, 图片变成圆形 求代码

html-css022

html5 css3 鼠标悬停图片, 图片变成圆形 求代码,第1张

<!doctype html>

<html>

<style>

.img:hover{border-radius:50%}

</style>

<body>

<img src="xxx.jpg" class="img"/>

</body>

</html>

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

}