css3过滤器-css3的过滤效果的简单例子

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

下面小编就给大家带来一个CSS3过滤效果的简单例子。 小编觉得还不错，现在分享给大家，也给大家一个参考，快来跟我一起看看吧

上图是css3新特性的滤镜效果。 学完这些，我们这群爱美又帅的大网能不能完美的用代码实现照片美化呢~~

好的css3过滤器，我们先实现照片旁边的白框，

#p1{   
　　　　　　　　　　/*给p定义宽高和颜色*/   
　　　　　　　　　　width: 200px;   
　　　　　　　　　　height: 250px;   
　　　　　　　　　　background: white;    
　　　　　　　　　/* 内填充距离照片为15px ，文字居中*/   
　　　　　　　　　　padding: 15px;   
　　　　　　　　　　text-align: center;   
　　　　　　/*　　把白色背景旋转-10deg  */   
　　　　　　　　　　-webkit-transform: rotate(-10deg);   
　　　　　　/*给背景一个阴影的效果*/   
　　　　　　　　　　box-shadow: 4px 4px 4px #666;   
　　　　　　　　　　float: left;   
　　　　　　　　　　}   






灰色滤镜

登录复制

写完红色背景框后，就该过滤了

先来第一个，艺术的黑白

#p1 img{   
/*把p1里面的图片百分百，等同于相对于在p1里面百分比放大填充*/   
width: 100%;　　　　　　　   
/*把图片变成黑白色括号里跟颜色变化的值，只能取0~1之间*/　   
-webkit-filter: grayscale(1); 　　}

登录复制

第二张合影，呃……旧照片。

#p1 img{   
            width: 100%;   
            -webkit-filter: sepia(1);   
        }

登录复制

第三张照片，反色？我不知道什么颜色

#p1 img{   
            width: 100%;   
            -webkit-filter: hue-rotate(200deg);   
        }

登录复制

第四张照片仿佛蒙上了一层雾气

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

登录复制

还有一张照片没有出现在效果图上，比较模糊css3过滤器，效果代码如下

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

登录复制

好了，我的滤镜分享完了，我们去美图吧

以上css3过滤效果的简单例子就是小编分享的全部内容，希望可以给大家一个参考，也希望大家多多支持PHP中文网。