您好,欢迎来到二三娱乐。
搜索
您的当前位置:首页红包照片四不像(一)

红包照片四不像(一)

来源:二三娱乐

一、红包照片是啥?

出门右拐,这里不欢迎你!
整个世界都需要安静。。。

二、留下有惊喜

很开心你是留下的小伙伴!
这里给大家带来,使用css方式实现红包照片中模糊的效果。


blur_result.png

三、基本逻辑

1、底部一张处理过的模糊照片,完整显示。
2、上面是一张清晰照片,但是只显示一个圆形的部分。
要求两张照片的位置完全一致,这样看起来就会是上面的最终效果了。

 //基本布局
<div class="img_container">
    <img class="img_blur" style="position: absolute;" src="../images/dj_pic.jpg"/>
    <img class="img_org"  style="position: absolute;" src="../images/dj_pic.jpg"/>
</div>

四、模糊照片处理

首先必须了解一下filter属性。

1、css3属性filter属性值

grayscale灰度
sepia褐色
saturate饱和度
hue-rotate色相旋转
invert反色
opacity透明度
brightness亮度
contrast对比度
blur模糊
drop-shadow阴影

2、css3属性filter的兼容性

由于是css3提供的新属性,所以并不是所有的浏览器都支持,不过目前比较高版本的浏览器都是支持的,但是使用时还是需要使用hack的写法:

 img {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
    -moz-filter:grayscale(1);
    -ms-filter: grayscale(1);
    -o-filter: grayscale(1);
  }
// 备注:ie不支持哦

3、模糊处理blur

// blur的参数是一个长度值,越大模糊效果越明显。
-webkit-filter: blur(10px);

五、偷窥镜处理

先来看看,如何显示图片的一部分。

1、clip属性

.img_org {
    position: absolute; 
    clip: rect(100px,300px,200px,100px);
}
// top right bottom left
part_clip.png

然而可惜的是clip只能达到矩形的效果。(W3C的弃儿)

2、clip-path属性

clip-path的取值比较丰富,从理论上讲,只要是完整闭合的路径都是可以,大致可以分为三类:

1.基本形状:circle()/圆形、ellipse()/椭圆、inset()/矩形;
2.多边形:polygon()——事实上多边形也属于基本形状;
3.svg-clippath:通过url的方式引用svg中的clippath;这个我们以后单独介绍。

于是我们直接使用circle就可以得到最后的结果了。

.img_org {
    position: absolute;
    clip-path:circle(40px at 200px 200px);
    -webkit-clip-path:circle(40px at 200px 220px);
}

备注:
1、可以使用svg-clippath真的很强大;
2、不过很可惜的是,目前只发现webkit的浏览器支持该属性。

3、完整结果

<div class="img_container">
    <img class="img_blur" style="position: absolute;-webkit-filter: blur(10px);" src="../images/dj_pic.jpg"/>
    <img class="img_org"  style="position: absolute;-webkit-clip-path:circle(40px at 200px 220px);" src="../images/dj_pic.jpg"/>
</div>
blur_result.png

六、完善

我们也可以加一些互动的效果——增加一些按钮,控制偷窥镜的状态。
例如,
1、可以通过调整偷窥镜的圆心位置来查看图片不同位置的清晰效果;
2、也可以通过setInterval增加一个动画,不断增加偷窥镜的半径知道最终清晰区域完整显示图片。
这些都比较容易,大家可以自行完成。

七、家庭作业——view组合实现偷窥镜

由于clip-path的属性目前支持的还不是很广泛,我们也可以通过view的组合方式,利用border-radius和position来实现偷窥镜的效果,大家可以试一下。

八、下集预告

    canvas实现模糊照片和偷窥镜的效果。

Copyright © 2019- yule263.com 版权所有 湘ICP备2023023988号-1

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务