编程 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 相关文章推荐

CSS3中的元素过渡属性transition示例详解

Nov 30 HTML / CSS

使用CSS3在触屏上为按钮实现激活效果

Sep 27 HTML / CSS

CSS3实现文字波浪线效果示例代码

Nov 20 HTML / CSS

css3学习系列之移动属性详解

Jul 04 HTML / CSS

一张图片能隐含千言万语之隐藏你的程序代码

Dec 13 HTML / CSS

深入理解HTML的FormData对象

May 17 HTML / CSS

使用phonegap查找联系人的实现方法

Mar 31 HTML / CSS

html5中audio支持音频格式的解决方法

Aug 24 HTML / CSS

canvas离屏技术与放大镜实现代码示例

Aug 31 HTML / CSS

HTML5实现无刷新修改URL的方法

Nov 14 HTML / CSS

web字体加载方案优化小结

Nov 29 HTML / CSS

CSS浮动引起的高度塌陷问题

Aug 05 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数组内存耗用太多问题的解决方法

2010/04/05 PHP

php中smarty模板条件判断用法实例

2015/06/11 PHP

php遍历、读取文件夹中图片并分页显示图片的方法

2016/11/15 PHP

PHP中soap用法示例【SoapServer服务端与SoapClient客户端编写】

2018/12/25 PHP

按给定几率进行随机抽取的js代码

2010/12/28 Javascript

将json当数据库一样操作的javascript lib

2013/10/28 Javascript

JavaScript数据结构和算法之二叉树详解

2015/02/11 Javascript

js+CSS实现弹出居中背景半透明div层的方法

2015/02/26 Javascript

JavaScript学习笔记整理之引用类型

2016/01/22 Javascript

谷歌showModalDialog()方法不兼容出现对话窗口的解决办法

2016/02/15 Javascript

JavaScript:Array类型全面解析

2016/05/19 Javascript

javascript设计模式Constructor（构造器）模式

2016/08/19 Javascript

jQuery联动日历的实例解析

2016/12/02 Javascript

jQuery 插件实现随机自由弹跳气泡样式

2017/01/12 Javascript

a标签置灰不可点击的实现方法

2017/02/06 Javascript

详解JavaScript添加给定的标签选项

2018/09/17 Javascript

Layui table field初始化加载时进行隐藏的方法

2019/09/19 Javascript

微信小程序实现禁止分享代码实例

2019/10/19 Javascript

vue中实现点击变成全屏的多种方法

2020/09/27 Javascript

深入浅析Python中的yield关键字

2018/01/24 Python

python实时监控cpu小工具

2018/06/21 Python

python 随机打乱图片和对应的标签方法

2018/12/14 Python

python 判断linux进程,并杀死进程的实现方法

2019/07/01 Python

Python3操作Excel文件（读写）的简单实例

2019/09/02 Python

tensorflow之获取tensor的shape作为max_pool的ksize实例

2020/01/04 Python

Python面向对象程序设计之私有变量，私有方法原理与用法分析

2020/03/23 Python

用css3实现当鼠标移进去时当前亮其他变灰效果

2014/04/08 HTML / CSS

美国在线购物频道：Shop LC

2019/04/21 全球购物

广州盈通面试题

2015/12/05 面试题

打造高效课堂实施方案

2014/03/22 职场文书

岗位安全生产责任书

2014/07/28 职场文书

初中英语教师个人工作总结2015

2015/07/21 职场文书

用人单位的规章制度，怎样制定才是有效的？

2019/07/09 职场文书

PostgreSQL将数据加载到buffer cache中操作方法

2021/04/16 PostgreSQL

python 实现德洛内三角剖分的操作

2021/04/22 Python

在Oracle表中进行关键词搜索的过程

2022/06/10 Oracle