大家在做网站的过程中都想把页面做的漂漂亮亮的,但是考虑到seo问题,不想沉淀太多js代码影响加载速度。
实现鼠标移动图片,图片渐渐放大,这里凡艺网络来跟大家分享下,如何使用css实现。
具体代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>纯css实现鼠标移动图片图片逐渐放大(过渡效果)</title> <style type="text/css"> div{ width: 300px; height: 300px; border: #000 solid 1px; overflow: hidden; float: left; } div img{ cursor: pointer; transition: all 0.6s; } div img:hover{ transform: scale(1.4); } </style> </head> <body> <div><img src="/uploads/allimg/1708/1-1FP12005570-L.jpg" width="300px;"height="300px;"/> </div> <div><img src="/uploads/allimg/170707/1-1FFG644050-L.jpg" width="300px;"height="300px;"/> </div> <div><img src="/uploads/allimg/170715/1-1FG50026200-L.jpg" width="300px;"height="300px;"/> </div> </body> </html>