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 相关文章推荐
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
Nov 29 HTML / CSS
使用before和:after伪类制作css3圆形按钮
Apr 08 HTML / CSS
利用CSS3实现圆角的outline效果的教程
Jun 05 HTML / CSS
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
Apr 26 HTML / CSS
CSS3实现莲花绽放的动画效果
Nov 06 HTML / CSS
CSS3实现菜单悬停效果
Nov 17 HTML / CSS
使用CSS实现弹性视频html5案例实践
Dec 26 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
Jan 21 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
Dec 11 HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
Jul 22 HTML / CSS
CSS3实现的文字弹出特效
Apr 16 HTML / CSS
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
Oct 16 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
当年上海收录机产品生产,进口和价格情况
2021/03/04 无线电
如何在PHP程序中防止盗链
2008/04/09 PHP
php下通过curl抓取yahoo boss 搜索结果的实现代码
2011/06/10 PHP
PHP中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
图文介绍PHP添加Redis模块及连接
2015/07/28 PHP
php中ob函数缓冲机制深入理解
2015/08/03 PHP
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
JavaScript与DropDownList 区别分析
2010/01/01 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
纯javascript制作日历控件
2015/07/17 Javascript
js删除局部变量的实现方法
2016/06/25 Javascript
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
Vue实现的父组件向子组件传值功能示例
2019/01/19 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
2020/05/14 Javascript
Element Breadcrumb 面包屑的使用方法
2020/07/26 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
2020/07/31 Javascript
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
python实现美团订单推送到测试环境,提供便利操作示例
2019/08/09 Python
Flask框架学习笔记之路由和反向路由详解【图文与实例】
2019/08/12 Python
浅析Python语言自带的数据结构有哪些
2019/08/27 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
解决python 输出到csv 出现多空行的情况
2021/03/24 Python
土木工程专业个人求职信
2013/12/05 职场文书
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
2014年监理个人工作总结
2014/12/11 职场文书
任命通知范文
2015/04/21 职场文书
2015年幼儿园班务工作总结
2015/05/12 职场文书
晚会开幕词范文
2016/03/04 职场文书
六年级作文之家庭作文
2019/12/12 职场文书
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python
了解Kubernetes中的Service和Endpoint
2022/04/01 Servers
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL