css3的过滤效果简单实例


Posted in HTML / CSS onAugust 03, 2016

css3的过滤效果简单实例

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

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

XML/HTML Code复制内容到剪贴板
  1. <style>     
  2. #div1{   
  3.   
  4. /*给div定义宽高和颜色*/   

  5.   
  6.   
  7. width: 200px;   

  8. height: 250px;   

  9. background: white;    

  10.   
  11.  /* 内填充距离照片为15px ,文字居中*/   

  12. padding: 15px;   

  13.   
  14. text-align: center;   

  15.   
  16. /*

    把白色背景旋转-10deg  */   

  17.   
  18. -webkit-transform: rotate(-10deg);   

  19.   
  20. /*给背景一个阴影的效果*/   

  21. box-shadow: 4px 4px 4px #666;   

  22. float: left;   

  23. }   

  24.   
  25.     
  26.   
  27. </style>

        

  28. <BR>

      

  29. <body><BR>

        

  30. <div id="div1">    
  31. <img src="img/001V28Mwty6Fww02IiNad&690.jpg">    
  32. <p>灰色滤镜</p>    
  33. </div>  
  34. <BR>  
  35. </body>   

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

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

XML/HTML Code复制内容到剪贴板
  1. #div1 img{   
  2.   
  3. /*把div1里面的图片百分百,等同于相对于在div1里面百分比放大填充*/   
  4. width: 100%;

        

  5. /*把图片变成黑白色括号里跟颜色变化的值,只能取0~1之间*/    
  6. -webkit-filter: grayscale(1); 

    }   

  7.   

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

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

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

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

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

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

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

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

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

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

HTML / CSS 相关文章推荐
全面解析CSS Media媒体查询使用操作(推荐)
Aug 15 HTML / CSS
CSS3实现3D翻书效果
Jun 20 HTML / CSS
CSS3实现点击放大的动画实例代码
Feb 27 HTML / CSS
详解css3中 text-fill-color属性
Jul 08 HTML / CSS
css3进阶之less实现星空动画的示例代码
Sep 10 HTML / CSS
利用CSS3的3D效果制作正方体
Mar 10 HTML / CSS
HTML5 微格式和相关的属性名称
Feb 10 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
Dec 11 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
May 08 HTML / CSS
html5中的input新属性range使用记录
Sep 05 HTML / CSS
详解HTML5中ol标签的用法
Sep 08 HTML / CSS
CSS 还能这样玩?奇思妙想渐变的艺术
Apr 27 HTML / CSS
CSS3实现滚动条动画效果代码分享
Aug 03 #HTML / CSS
关于box-sizing的全面理解
Jul 28 #HTML / CSS
css3动画效果小结(推荐)
Jul 25 #HTML / CSS
浅谈CSS3动画的回调处理
Jul 21 #HTML / CSS
浅谈css3中的前缀
Jul 20 #HTML / CSS
纯CSS3绘制打火机动画火焰效果
Jul 18 #HTML / CSS
CSS3绘制有活力的链接下划线
Jul 14 #HTML / CSS
You might like
深入理解php的MySQL连接类
2013/06/07 PHP
js split 的用法和定义 js split分割字符串成数组的实例代码
2012/05/13 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
关于 jQuery Easyui异步加载tree的问题解析
2016/12/06 Javascript
js自定义弹框插件的封装
2020/08/24 Javascript
解决html input验证只能输入数字,不能输入其他的问题
2017/07/21 Javascript
谈谈VUE种methods watch和compute的区别和联系
2017/08/01 Javascript
vue中SPA单页面应用程序详解
2017/11/07 Javascript
了解ESlint和其相关操作小结
2018/05/21 Javascript
centos 上快速搭建ghost博客方法分享
2018/05/23 Javascript
浅谈super-vuex使用体验
2018/06/25 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
Vue组件模板的几种书写形式(3种)
2020/02/19 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
小程序中的箭头函数的具体使用
2020/06/19 Javascript
JS实现密码框效果
2020/09/10 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
在Django的视图中使用form对象的方法
2015/07/18 Python
Python闭包的两个注意事项(推荐)
2017/03/20 Python
python里使用正则的findall函数的实例详解
2017/10/19 Python
用python处理图片之打开\显示\保存图像的方法
2018/05/04 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
HTML5 Video标签的属性、方法和事件汇总介绍
2015/04/24 HTML / CSS
美国名牌太阳镜折扣网站:Eyedictive
2017/05/15 全球购物
会计辞职信范文
2014/01/15 职场文书
办公室秘书岗位职责范本
2014/02/11 职场文书
老公保证书范文
2014/04/29 职场文书
服务行业口号
2014/06/11 职场文书
大学生实习证明范文(5篇)
2014/09/18 职场文书
搞笑婚前保证书
2015/02/28 职场文书
走进科学观后感
2015/06/18 职场文书
入党自传范文2015
2015/06/26 职场文书
关于开学的感想
2015/08/10 职场文书
Python安装使用Scrapy框架
2022/04/12 Python
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript