编程 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的图形3d翻转效果应用示例

Apr 08 HTML / CSS

基于html和CSS3制作酷炫的导航栏

Sep 23 HTML / CSS

CSS3中使用RGBa来调节透明度的教程

May 09 HTML / CSS

利用CSS3实现开门效果实例源码

Aug 22 HTML / CSS

css3实现文字扫光渐变动画效果的示例

Nov 07 HTML / CSS

Html5 Canvas 实现一个“刮刮乐”游戏

Sep 05 HTML / CSS

HTML5 UTF-8 中文乱码的解决方法

Nov 18 HTML / CSS

html5+css3气泡组件的实现

Nov 21 HTML / CSS

详解HTML5中表单验证的8种方法介绍

Dec 19 HTML / CSS

Html5之title吸顶功能

Jun 04 HTML / CSS

使用html2canvas.js实现页面截图并显示或上传的示例代码

Dec 18 HTML / CSS

详解移动端h5页面根据屏幕适配的四种方案

Apr 15 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 adodb分页实现代码

2009/03/19 PHP

PHP性能优化大全(php.ini)

2016/05/20 PHP

AJAX PHP无刷新form表单提交的简单实现(推荐)

2016/09/09 PHP

PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案

2017/10/17 PHP

PHP图像处理 imagestring添加图片水印与文字水印操作示例

2020/02/06 PHP

PHP中迭代器的简单实现及Yii框架中的迭代器实现方法示例

2020/04/26 PHP

javascript引导程序

2008/10/26 Javascript

编写Js代码要注意的几条规则

2010/09/10 Javascript

捕获浏览器关闭、刷新事件不同情况下的处理方法

2013/06/02 Javascript

公共js在页面底部加载的注意事项介绍

2013/07/18 Javascript

Jquery 复选框取值兼容FF和IE8(测试有效)

2013/10/29 Javascript

js获取select标签选中值的两种方式

2014/01/09 Javascript

jquery实现背景墙聚光灯效果示例分享

2014/03/02 Javascript

基于jquery实现等比缩放图片

2014/12/03 Javascript

微信小程序教程之本地图片上传(leancloud)实例详解

2016/11/16 Javascript

如何提高javascript加载速度

2016/12/26 Javascript

Mac系统下Webstorm快捷键整理大全

2017/05/28 Javascript

深入浅出webpack教程系列_安装与基本打包用法和命令参数详解

2017/09/10 Javascript

微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解

2019/05/14 Javascript

Vue Components 数字键盘的实现

2019/09/18 Javascript

JS+html5实现异步上传图片显示上传文件进度条功能示例

2019/11/09 Javascript

Vue Object 的变化侦测实现代码

2020/04/15 Javascript

如何利用nodejs自动定时发送邮件提醒（超实用）

2020/12/01 NodeJs

[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time

2014/05/22 DOTA

django 中的聚合函数，分组函数，F 查询，Q查询

2019/07/25 Python

python标记语句块使用方法总结

2019/08/05 Python

在Python中画图(基于Jupyter notebook的魔法函数)

2019/10/28 Python

Python各种扩展名区别点整理

2020/02/27 Python

如何让python的运行速度得到提升

2020/07/08 Python

Python中读取文件名中的数字的实例详解

2020/12/25 Python

女装和独特珠宝：Sundance Catalog

2018/09/19 全球购物

化工专业个人的求职信范文

2013/11/28 职场文书

求职简历中个人的自我评价

2013/12/01 职场文书

用电申请报告范文

2015/05/18 职场文书

2015年三年级班主任工作总结

2015/05/21 职场文书

大学生党课感想

2015/08/11 职场文书