css3的过滤效果简单实例

更新时间:2023-04-06 22:46:37 阅读：评论：0

上面的图片就是css3新特性的滤镜效果，学会了这些那么我们这群爱美爱帅的大web是不是就可以完美的用代码实现照片美化了捏~~

好，咱们先把照片后面的白框实现，

xml/html code
复制内容到剪贴板

把白色的背景框写好之后，接下来就该到滤镜了

首先来第一张，艺术的黑白色

xml/html code
复制内容到剪贴板

#div1img{ 湿润的反义词是什么/*把div1里面的图片百分百，等同于相对于在d越人歌歌词iv1里面百分比放大填充*/ width:100%;　　　　　　　 /*把图片变成黑白色括号里跟颜色变化的值，只能取0~1之间*/　 -webkit-filter:grayscale(1);　　}

第二张照片，额…老照片.

xml/html code
复制内容到剪贴板

#div1img{ width:100%; -webkit-filter:pia(1); }

第三张照片，反色？我也不太清楚啥颜色

xml/html code
复制内容到剪贴板

#div1img{ width:100%; -webkit-filter:hue-rotat阿基拉和拼字大赛e(200deg); }

第四张照片，仿佛罩了一层白雾

xml/html code
复制内容到剪贴板

#div1img{ width:100%; -webkit-filter:opacity(0.5); }

还有一张照片的效果图上没有，是模糊效果代码如下

xml/html code
复制内容到剪贴板

#div4img{ width:100%; -webkit-filter:opacity(0.5); }

好了，我的滤镜分享完毕，接下来美图去了

以上这篇css3的过滤效果简单实例就是www.887551.com分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持www.887551.com。

本文发布于:2023-04-06 22:46:35，感谢您对本站的认可！

标签：剪贴板滤镜照片内容

留言与评论（共有 0 条评论）