CSS 实现 光圈效果

html-css0123

CSS 实现 光圈效果,第1张

主要利用css3 animation, 在0 ~ 100% 过渡中让box-shadow渐变(box-shadow只需要设置blur 和spread)

HTML:

CSS:

预览效果入如下:

建议你不要经常使用滤镜。

一是CSS滤镜目前仅IE支持,并且有时在支持上会出现无法解释的BUG。

二是CSS滤镜如果用的太多了,会给访客的电脑造成负担。因为它的是客户端完成的,CSS滤镜效果太多太炫的话很会吃电脑内存,并且会让网页拖动起来不流畅。

你这种情况比较复杂!都是滤镜做的

字体动感模糊窗口--图层,右击字体图层,删格式化文件,滤镜--模糊--动感模糊,选择角度和距离,角度表示你动感模糊的方向,距离越大动感模糊效果越厉害

图片雾化在你原有图层上新建图层保证前景色和背景色为黑白,滤镜--渲染--云彩,将图层模式正常改为滤色即可。。如果觉得雾化太重可以适当降低不透明度