如何实现图片缩放效果?

实现图片缩放效果我们有两种办法,

方法一:使用css3的transition的过渡效果

    代码: html
                <div></div>
            css
                div{
                        background-image:url(1.jpg);
                        background-size:20px 20px;
                        transition:background-size 3s;
                    }
                div:hover{
                        background-size:50px 50px;
                    }

方法二:使用background-clip(用于背景裁剪)
background-clip拥有四个属性。
①padding-box,从padding区域(不含padding)开始向外裁剪背景。
②border-box,从border区域(不含border)开始向外裁剪背景。
③content-box,从content区域开始向外裁剪背景
④text,从前景内容的形状(比如文字)作为裁剪区域向外裁剪

什么是padding-box、border-box、content-box、text?
这些分别是以padding、border、content、text为界限的一个区域。

一般情况下,在一个div中,border-box区域>padding-box区域>content-box区域>text区域

我们可以通过这种他们区域大小的不同来实现缩放效果,

    代码: html
                <div></div>
            css
                div{
                        background-image:url(1.jpg);
                        background-clip:content-box;
                    }
                div:hover{
                        background-clip:padding-box;
                    }

图片的扩大效果同样的方法实现,这里就不叙述了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值