css3的过滤效果简单实例

在放大镜下,你可以看到每一片雪花都是一幅幅精美的图案:有的是晶莹的薄片,有的像白亮的银针,有的像一把张开的小扇,有的像夜空的星星……

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

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

XML/HTML Code复制内容到剪贴板
  1. <style> 
  2. #div1{
  3.           /*给div定义宽高和颜色*/
  4.           width:200px;
  5.           height:250px;
  6.           background:white;
  7.          /*内填充距离照片为15px,文字居中*/
  8.           padding:15px;
  9.           text-align:center;
  10.       /*  把白色背景旋转-10deg*/
  11.           -webkit-transform:rotate(-10deg);
  12.       /*给背景一个阴影的效果*/
  13.           box-shadow:4px4px4px#666;
  14.           float:left;
  15.           }
  16. </style>       
  17. <BR>      
  18. <body><BR>         
  19. <divid="div1">
  20. <imgsrc="img/001V28Mwty6Fww02IiNad&690.jpg">
  21. <p>灰色滤镜</p>
  22. </div>
  23. <BR>
  24. </body>

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

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

XML/HTML Code复制内容到剪贴板
  1. #div1img{
  2. /*把div1里面的图片百分百,等同于相对于在div1里面百分比放大填充*/
  3. width:100%;       
  4. /*把图片变成黑白色括号里跟颜色变化的值,只能取0~1之间*/ 
  5. -webkit-filter:grayscale(1);  }

第二张照片,额...老照片.

XML/HTML Code复制内容到剪贴板
  1. #div1img{
  2. width:100%;
  3. -webkit-filter:sepia(1);
  4. }

第三张照片,反色?我也不太清楚啥颜色

XML/HTML Code复制内容到剪贴板
  1. #div1img{
  2. width:100%;
  3. -webkit-filter:hue-rotate(200deg);
  4. }

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

XML/HTML Code复制内容到剪贴板
  1. #div1img{
  2. width:100%;
  3. -webkit-filter:opacity(0.5);
  4. }

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

XML/HTML Code复制内容到剪贴板
  1. #div4img{
  2. width:100%;
  3. -webkit-filter:opacity(0.5);
  4. }

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

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