CSS-实战-交互式图片

1、实现效果

当鼠标经过图片,图片会逐渐放大,仿佛你距离图片越来越近,常在旅游、商品的展示页面应用。

2、实现思路

(1)使用 scale 函数放大图片
(2)使用transition实现逐渐变化的动画。
(3)使用 overflow: hidden; 控制图片在图片外围盒子中。

3、源代码

素材:
图片一张


CSS-实战-交互式图片_第1张图片
bl.jpg



    
    CSS实战-鼠标经过动画
    


    
< img src="bl.jpg " border="0" >

你可能感兴趣的:(CSS-实战-交互式图片)