---〉
效果如上,一个简单的过渡放大效果,
<!DOCTYPE HTML> <html> <body> <style> #test{ width:300px; height:300px; background:#ccc; border:5px solid #ccc; overflow:hidden; } #con{ width:300px; height:300px; background:url("2.jpg") -20px -20px; transition:all ease-in-out 0.5s; } #con:hover{ transform:scale(1.1); } </style> <div id="test"> <div id="con"></div> </div> </body> </html>
这里transition:all ease-in-out 0.5s;设定变形参数, transform:scale(1.1);是原图放大1.1倍