编程 HTML / CSS

css3的过滤效果简单实例

Posted in HTML / CSS onAugust 03, 2016

css3的过滤效果简单实例

上面的图片就是css3新特性的滤镜效果，学会了这些那么我们这群爱美爱帅的大web是不是就可以完美的用代码实现照片美化了捏~~

好，咱们先把照片后面的白框实现，

XML/HTML Code复制内容到剪贴板

<style>　
#div1{
/*给div定义宽高和颜色*/
width: 200px;
height: 250px;
background: white;
　/* 内填充距离照片为15px ，文字居中*/
padding: 15px;
text-align: center;
/*

把白色背景旋转-10deg */
-webkit-transform: rotate(-10deg);
/*给背景一个阴影的效果*/
box-shadow: 4px 4px 4px #666;
float: left;
}
</style>
　
<BR>
<body><BR>
　
<div id="div1">
<img src="img/001V28Mwty6Fww02IiNad&690.jpg">
<p>灰色滤镜</p>
</div>
<BR>
</body>

把白色的背景框写好之后，接下来就该到滤镜了

首先来第一张，艺术的黑白色

XML/HTML Code复制内容到剪贴板

#div1 img{
/*把div1里面的图片百分百，等同于相对于在div1里面百分比放大填充*/
width: 100%;
　
/*把图片变成黑白色括号里跟颜色变化的值，只能取0~1之间*/　
-webkit-filter: grayscale(1);
}

第二张照片，额...老照片.

XML/HTML Code复制内容到剪贴板

#div1 img{
width: 100%;
-webkit-filter: sepia(1);
}

第三张照片，反色？我也不太清楚啥颜色

XML/HTML Code复制内容到剪贴板

#div1 img{
width: 100%;
-webkit-filter: hue-rotate(200deg);
}

第四张照片，仿佛罩了一层白雾

XML/HTML Code复制内容到剪贴板

#div1 img{
width: 100%;
-webkit-filter: opacity(0.5);
}

还有一张照片的效果图上没有，是模糊效果代码如下

XML/HTML Code复制内容到剪贴板

#div4 img{
width: 100%;
-webkit-filter: opacity(0.5);
}

好了，我的滤镜分享完毕，接下来美图去了

以上这篇css3的过滤效果简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

css3的过滤效果简单实例

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐

利用CSS的Sass预处理器（框架）来制作居中效果

Mar 10 HTML / CSS

简单总结CSS3中视窗单位Viewport的常见用法

Feb 04 HTML / CSS

利用css3-animation实现逐帧动画效果

Mar 10 HTML / CSS

HTML5离线缓存Manifest是什么

Mar 09 HTML / CSS

html通过canvas转成base64的方法

Jul 18 HTML / CSS

html5弹跳球示例代码

Jul 23 HTML / CSS

详解HTML5 Canvas绘制时指定颜色与透明度的方法

Mar 25 HTML / CSS

Html5实现用户注册自动校验功能实例代码

May 24 HTML / CSS

HTML5 canvas基本绘图之图形变换

Jun 27 HTML / CSS

HTML5 文件上传下载的实例代码

Jul 03 HTML / CSS

LocalStorage记住用户和密码功能

Jul 24 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

GNN(1) 代理(2) #{}(1) 图片模糊(1) 选择器(1) flex-shrink(1) 外键(1) SQL注入(2) flex(1) canvas(2)

You might like

PHP 巧用数组降低程序的时间复杂度

2010/01/01 PHP

浅析使用Turck-mmcache编译来加速、优化PHP代码

2013/06/20 PHP

PHP判断远程图片或文件是否存在的实现代码

2014/02/20 PHP

页面载入结束自动调用js函数示例

2013/09/23 Javascript

jquery live()重复绑定的解决方法介绍

2014/01/03 Javascript

jQuery实现的仿select功能代码

2015/08/19 Javascript

微信小程序之picker日期和时间选择器

2017/02/09 Javascript

Vue.js render方法使用详解

2017/04/05 Javascript

基于ExtJs在页面上window再调用Window的事件处理方法

2017/07/26 Javascript

addeventlistener监听scroll跟touch(实例讲解)

2017/08/04 Javascript

解决ie img标签内存泄漏的问题

2017/10/13 Javascript

node.js博客项目开发手记

2018/03/16 Javascript

使用pkg打包Node.js应用的方法步骤

2018/10/19 Javascript

Node.js一行代码实现静态文件服务器的方法步骤

2019/05/07 Javascript

小程序中canvas的drawImage方法参数使用详解

2019/07/04 Javascript

js实现旋转的星空效果

2019/11/01 Javascript

JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例

2019/11/19 Javascript

python调用shell的方法

2013/11/20 Python

浅谈python正则的常用方法覆盖范围70%以上

2018/03/14 Python

pip install urllib2不能安装的解决方法

2018/06/12 Python

Python判断一个三位数是否为水仙花数的示例

2018/11/13 Python

python multiprocessing多进程变量共享与加锁的实现

2019/10/02 Python

Python守护进程实现过程详解

2020/02/10 Python

python实现感知机模型的示例

2020/09/30 Python

总结30个CSS3选择器

2017/04/13 HTML / CSS

Black Halo官方网站：购买连衣裙、礼服和连体裤

2018/06/13 全球购物

UNIX文件类型

2013/08/29 面试题

临床医师专业个人自我评价范文

2013/11/07 职场文书

业务员岗位职责范本

2013/12/15 职场文书

2014年家长学校工作总结

2014/11/20 职场文书

2015小学教师年度考核工作总结

2015/05/12 职场文书

2015年学校医务室工作总结

2015/07/20 职场文书

中学政教处工作总结

2015/08/13 职场文书

小学语文教学反思范文

2016/03/03 职场文书

python 如何获取页面所有a标签下href的值

2021/05/06 Python

利用Python将list列表写入文件并读取的方法汇总

2022/03/25 Python