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中一些@规则的用法小结
Mar 09 HTML / CSS
CSS3制作翻转效果_动力节点Java学院整理
Jul 11 HTML / CSS
css3简单练习实现遨游浏览器logo的绘制
Jan 30 HTML / CSS
css3中background新增的4个新的相关属性用法介绍
Sep 26 HTML / CSS
用CSS3绘制三角形的简单方法
Jul 17 HTML / CSS
使用CSS3的ruby-position固定注音位置的用法示例
Jul 05 HTML / CSS
CSS3中伪元素::before和::after的用法示例
Sep 18 HTML / CSS
CSS3 边框效果
Nov 04 HTML / CSS
CSS3 实现弹跳的小球动画
Oct 26 HTML / CSS
基于 HTML5 WebGL 实现的垃圾分类系统
Oct 08 HTML / CSS
html5版canvas自由拼图实例
Oct 15 HTML / CSS
HTML5添加禁止缩放功能
Nov 03 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 imagecreatetruecolor 创建高清和透明图片代码小结
2010/05/15 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
CI框架的安全性分析
2016/05/18 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
phpStorm+XDebug+chrome 配置详解
2019/04/01 PHP
Vagrant(WSL)+PHPStorm+Xdebu 断点调试环境搭建
2019/12/13 PHP
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
2013/08/28 Javascript
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
JavaScript中的replace()方法使用详解
2015/06/06 Javascript
JS Select下拉框(支持输入模糊查询)
2017/02/04 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
解读vue生成的文件目录结构及说明
2017/11/27 Javascript
详解小程序rich-text对富文本支持方案
2018/11/28 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
2020/10/30 Javascript
python实现的各种排序算法代码
2013/03/04 Python
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
Django 路由系统URLconf的使用
2018/10/11 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
python+excel接口自动化获取token并作为请求参数进行传参操作
2020/11/10 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
英国网上花店:Bunches
2016/11/29 全球购物
德国领先的大尺码和超大尺码男装在线零售商:Bigtex
2019/06/22 全球购物
生产经理的自我评价分享
2013/11/07 职场文书
党员民主评议个人总结
2014/10/20 职场文书
2015年保险公司工作总结
2015/04/24 职场文书
党员转正意见怎么写
2015/06/03 职场文书
运动会观后感
2015/06/09 职场文书
2015年秋季开学典礼校长致辞
2015/07/16 职场文书
MySQL性能压力基准测试工具sysbench的使用简介
2021/04/21 MySQL
Go语言切片前或中间插入项与内置copy()函数详解
2021/04/27 Golang
JavaScript中的LHS和RHS分析详情
2022/04/06 Javascript