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字体效果的设置方法小结
Jun 13 HTML / CSS
CSS3 clip-path 用法介绍详解
Mar 01 HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
Jul 08 HTML / CSS
CSS3实现点击放大的动画实例代码
Feb 27 HTML / CSS
css3实现元素环绕中心点布局的方法示例
Jan 15 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
Jan 17 HTML / CSS
CSS3 不定高宽垂直水平居中的几种方式
Mar 26 HTML / CSS
Html5实现单张、多张图片上传功能
Apr 28 HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
May 07 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
Jun 10 HTML / CSS
AmazeUI 模态窗口的实现代码
Aug 18 HTML / CSS
CSS 鼠标选中文字后改变背景色的实现代码
May 21 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
电脑硬件及电脑配置知识大全
2020/03/17 数码科技
一个图形显示IP的PHP程序代码
2007/10/19 PHP
PHP中is_file不能替代file_exists的理由
2014/03/04 PHP
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
PHP实现动态web服务器方法
2015/07/29 PHP
Yii2组件之多图上传插件FileInput的详细使用教程
2016/06/20 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
javascript 获取页面的高度及滚动条的位置的代码
2010/05/06 Javascript
js 模拟气泡屏保效果代码
2010/07/10 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
2012/12/25 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
2013/04/15 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
jQuery类选择器用法实例
2014/12/23 Javascript
每天一篇javascript学习小结(Array数组)
2015/11/11 Javascript
js实现微博发布小功能
2017/01/12 Javascript
Bootstrap按钮组实例详解
2017/07/03 Javascript
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
vue 搭建后台系统模块化开发详解
2019/05/01 Javascript
JS+canvas五子棋人机对战实现步骤详解
2020/06/04 Javascript
js实现圆形菜单选择器
2020/12/03 Javascript
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
详解python单元测试框架unittest
2018/07/02 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
在python3中实现更新界面
2020/02/21 Python
解决pycharm debug时界面下方不出现step等按钮及变量值的问题
2020/06/09 Python
如何基于Python pygame实现动画跑马灯
2020/11/18 Python
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
成功的酒店创业计划书
2013/12/27 职场文书
排查整治工作方案
2014/06/09 职场文书
禁止酒驾标语
2014/06/25 职场文书
项目合作意向书模板
2014/07/29 职场文书
个人贷款收入证明
2014/10/26 职场文书
英语导游词
2015/02/13 职场文书
2016年高校自主招生自荐信范文
2015/03/24 职场文书