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