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实现超炫风车特效
Nov 12 HTML / CSS
css3 border旋转时的动画应用
Jan 22 HTML / CSS
利用CSS3实现的文字定时向上滚动
Aug 29 HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
Aug 24 HTML / CSS
详解移动端HTML5音频与视频问题及解决方案
Aug 22 HTML / CSS
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
Jan 30 HTML / CSS
html5开发之viewport使用
Oct 17 HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
Apr 24 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
Jan 09 HTML / CSS
使用phonegap进行提示操作的具体方法
Mar 30 HTML / CSS
HTML5操作WebSQL数据库的实例代码
Aug 26 HTML / CSS
Canvas如何做个雪花屏版404的实现
Sep 25 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设计模式 Interpreter(解释器模式)
2011/06/26 PHP
php实例分享之html转为rtf格式
2014/06/02 PHP
php基于socket实现SMTP发送邮件的方法
2015/03/05 PHP
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
php修改数组键名的方法示例
2017/04/15 PHP
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
js创建子窗口并且回传值示例代码
2013/07/02 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
JS 在指定数组中随机取出N个不重复的数据
2014/06/10 Javascript
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
2015/09/14 Javascript
无缝滚动的简单实现代码(推荐)
2016/06/07 Javascript
微信小程序  Mustache语法详细介绍
2016/10/27 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
用vue和node写的简易购物车实现
2017/04/25 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
微信公众号平台接口开发 获取access_token过程解析
2019/08/14 Javascript
vue element-ui实现动态面包屑导航
2019/12/23 Javascript
Vue scoped及deep使用方法解析
2020/08/01 Javascript
vue中利用three.js实现全景图的完整示例
2020/12/07 Vue.js
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
给朋友的道歉信
2014/01/09 职场文书
事业单位辞职信范文
2014/01/19 职场文书
高中毕业自我评价
2014/02/08 职场文书
在校大学生个人的自我评价
2014/02/13 职场文书
个人四风问题对照检查材料
2014/10/01 职场文书
2014年采购员工作总结
2014/11/18 职场文书
演讲比赛主持词
2015/06/29 职场文书
小学班级标语口号大全
2015/12/26 职场文书
教师教育心得体会
2016/01/19 职场文书
Consul在linux环境的集群部署
2022/04/08 Servers
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python
苹果的回收机器人可以通过拆解iPhone获取大量的金和铜并外公布了环境保护最新进展
2022/04/21 数码科技