从而有流畅的感觉
为了让网页的使用体验更好，我们会让网页的某些元素对鼠标的行动做出响应。例如鼠标滑过、单击按钮的时候按钮变色、变形。之前在很多网页上看到了鼠标滑过一个图片链接时图片放大、拉近的效果，今天测验考试实现一下。
1. 使用background实现思路：设置以图片作为div元素的配景，鼠标滑过div的时候通过background属性放大图片。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>background实现图片拉近效果</title> <style> #box { background: url(../images/img022.png); width: 720px; height: 720px; margin: 0 auto; border: 1px solid #aaa; background-color: #444; } #box:hover { background-size: 100.5% 100.5%; } </style> </head> <body> <div id=‘box‘> </div> </body> </html> 2. 使用img元素的width height属性实现思路：当鼠标滑过图片时，改削img元素的width和height属性放大图片
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>img图片拉近效果</title> <style> #box{ width:60%; min-width:1000px; min-height:800px; margin:0 auto; border:1px solid #aaa; background-color:#444; text-align:center; } img:hover{ width:723px; height:723px; } </style> </head> <body> <div id=‘box‘> <img src="" width=‘720px‘ height=‘720px‘ /> </div> </body> </html> 3. 使用transform放大图片 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>transform实现图片拉近效果</title> <style> a:hover img { transform: scale(1.005, 1.005); } </style> </head> <body> <a href="#"> <img src="" /> </a> </body> </html> 4. 使用transform和transition来放大图片以上的3种实现方法中，图片放大过程几乎都是瞬间完成的，觉得不流畅，视觉体验也欠好。同transition可以设置放大过程经历的时间，从而有流畅的觉得。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>transform、transform实现图片拉近</title> <style> .test_a { display: block; margin: 0 auto; width:400px; overflow: hidden; } .test_a img { width: 100%; } .test_a:hover img { transform: scale(1.2); transition: all 1s ease 0s; } </style> </head> <body> <a href=""> <img src="" /> </a> </body> </html>上面这种方法，图片放大过程是流畅的，但是缩小过程很生硬，可以改造一下。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>transform、transform 图片拉近 优化</title> <style> .test_a { display: block; margin: 0 auto; width:400px; overflow: hidden; } .test_a img { width: 100%; transform: scale(1); transition: all 1s ease 0s; } .test_a:hover img { transform: scale(1.2); transition: all 1s ease 0s; } </style> </head> <body> <a href=""> <img src="" /> </a> </body> </html> 后语尝试的时候发明很多常识有点模糊了，该补习了。
在线DEMO https://hgy9473.github.io/myl...
HTML CSS 实现鼠标悬停时图片拉近效果
，温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/31240.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")