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 相关文章推荐
CSS3教程(1):什么是CSS3
Apr 02 HTML / CSS
介绍CSS3使用技巧5个
Apr 02 HTML / CSS
支持IE8的纯css3开发的响应式设计动画菜单教程
Nov 05 HTML / CSS
CSS3 animation实现逐帧动画效果
Jun 02 HTML / CSS
详解css3中的伪类before和after常见用法
Nov 17 HTML / CSS
canvas学习笔记之2d画布基础的实现
Feb 21 HTML / CSS
Html5实现如何在两个div元素之间拖放图像
Mar 29 HTML / CSS
HTML5实现动画效果的方式汇总
Feb 29 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
Jul 26 HTML / CSS
html5清空画布方法(三种)
Oct 16 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
Dec 02 HTML / CSS
CSS 新特性 contain控制页面的重绘与重排问题
Apr 30 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
Zerg剧情介绍
2020/03/14 星际争霸
PHP原理之异常机制深入分析
2010/08/08 PHP
PHP 显示客户端IP与服务器IP的代码
2010/10/12 PHP
PHP中error_reporting()函数的用法(修改PHP屏蔽错误)
2011/07/01 PHP
关于jQuery新的事件绑定机制on()的使用技巧
2013/04/26 Javascript
javascript检测两个数组是否相似
2015/05/19 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
基于jQuery实现美观且实用的倒计时实例代码
2015/12/30 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
2017/03/09 Javascript
web.js.字符串与正则表达式操作
2017/05/13 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
2018/09/01 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
2019/07/09 Javascript
Nodejs在局域网配置https访问的实现方法
2020/10/17 NodeJs
python自定义类并使用的方法
2015/05/07 Python
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
Pandas的read_csv函数参数分析详解
2019/07/02 Python
python 回溯法模板详解
2020/02/26 Python
python游戏开发的五个案例分享
2020/03/09 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
css3 边框、背景、文本效果的实现代码
2018/03/21 HTML / CSS
大女孩胸罩:Big Girls Bras
2016/12/15 全球购物
计算机专业应届毕业生自荐信
2013/09/26 职场文书
心理健康心得体会
2014/01/02 职场文书
婚礼司仪主持词
2014/03/14 职场文书
清明节演讲稿
2014/05/27 职场文书
物流管理专业推荐信
2014/09/06 职场文书
出纳试用期自我鉴定范文
2014/09/16 职场文书
十一国庆节“向国旗敬礼”主题班会活动方案
2014/09/27 职场文书
2015年世界艾滋病日活动总结
2015/03/24 职场文书
在 Python 中利用 Pool 进行多线程
2022/04/24 Python
Nginx安装配置详解
2022/06/25 Servers