京东店铺实现鼠标经过图片放大或缩小过渡显示效果,自由布局工具CSS3放大镜组件教程

作者：陈俊    日期：2018-7-26 10:03   人气：6766    分类：自由布局教程

疯狂的美工京东自由布局工具CSS3放大镜组件的使用教程来啦，可以实现鼠标经过图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）或缩小显示图片效果，让京东店铺装修模块更加丰富，视觉效果更强。下面疯狂的美工小编给大家带来视频教程快快来学习怎么使用吧~

通过这节课程学习用疯狂的美工京东自由布局实现模块上或海报上鼠标经过图片放大或缩小显示的效果，图片样式自由设计，设计好上传图片空间再到自由布局中布局位置，建议原始图片尺寸设计大一点，鼠标经过放大后才不会模糊，具体请看我下面的操作演示~

按键盘上ALT+方向键可以微移组件的位置

以下是教程中演示图用到的地址如果想操作一样的可以对着教程学习操作

任意图地址：https://img11.360buyimg.com/cms/jfs/t21934/248/438076953/287331/47726e14/5b0d376aN042069cd.jpg
CSS3放大境地址：
https://img10.360buyimg.com/n0/jfs/t20302/123/2304076417/3594521/f448e304/5b505e9cNb650e9c9.jpg
https://img14.360buyimg.com/n0/jfs/t20926/249/2416333356/3606474/cad604e5/5b55a7eeNc2d2f043.jpg
http://img11.360buyimg.com/n0/jfs/t23212/278/1203747684/3583708/752dbe88/5b55a3b5N1a288ece.jpg
https://img10.360buyimg.com/cms/jfs/t23518/168/1182759420/291703/8cd154c1/5b55a769Nf047d06a.jpg