CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style type="text/css"> 
div{ 
width: 300px; 
height: 300px; 
border: #000 solid 1px; 
margin: 50px auto; 
overflow: hidden; 
} 
div img{ 
cursor: pointer; 
transition: all 0.6s; 
} 
div img:hover{ 
transform: scale(1.4); 
} 
</style> 
</head> 
<body> 
<div> 
<img src="img/focus.png" /> 
</div> 
</body> 
</html>

  

 

 

其中: 

transition: all 0.6s;  表示所有的属性变化在0.6s的时间段内完成。

transform: scale(1.4);  表示在鼠标放到图片上的时候图片按比例放大1.4倍。


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM