编程 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字体效果的设置方法小结

Jun 13 HTML / CSS

CSS3 clip-path 用法介绍详解

Mar 01 HTML / CSS

使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法

Jul 08 HTML / CSS

CSS3实现点击放大的动画实例代码

Feb 27 HTML / CSS

css3实现元素环绕中心点布局的方法示例

Jan 15 HTML / CSS

简单几步用纯CSS3实现3D翻转效果

Jan 17 HTML / CSS

CSS3 不定高宽垂直水平居中的几种方式

Mar 26 HTML / CSS

Html5实现单张、多张图片上传功能

Apr 28 HTML / CSS

HTML5资源预加载(Link prefetch)详细介绍（给你的网页加速）

May 07 HTML / CSS

一文彻底解决HTML5页面中长按保存图片功能

Jun 10 HTML / CSS

AmazeUI 模态窗口的实现代码

Aug 18 HTML / CSS

CSS 鼠标选中文字后改变背景色的实现代码

May 21 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

电脑硬件及电脑配置知识大全

2020/03/17 数码科技

一个图形显示IP的PHP程序代码

2007/10/19 PHP

PHP中is_file不能替代file_exists的理由

2014/03/04 PHP

destoon调用自定义模板及样式的公告栏

2014/06/21 PHP

PHP实现动态web服务器方法

2015/07/29 PHP

Yii2组件之多图上传插件FileInput的详细使用教程

2016/06/20 PHP

Laravel 5.4.36中session没有保存成功问题的解决

2018/02/19 PHP

基于PHP实现解密或加密Cloudflar邮箱保护

2020/06/24 PHP

javascript 获取页面的高度及滚动条的位置的代码

2010/05/06 Javascript

js 模拟气泡屏保效果代码

2010/07/10 Javascript

js实现运动logo图片效果及运动元素对象sportBox使用方法

2012/12/25 Javascript

利用百度地图JSAPI生成h7n9禽流感分布图实现代码

2013/04/15 Javascript

更快的异步执行(setTimeout多浏览器)

2014/08/12 Javascript

jQuery类选择器用法实例

2014/12/23 Javascript

每天一篇javascript学习小结（Array数组）

2015/11/11 Javascript

js实现微博发布小功能

2017/01/12 Javascript

Bootstrap按钮组实例详解

2017/07/03 Javascript

Vue 滚动行为的具体使用方法

2017/09/13 Javascript

使用socket.io实现简单聊天室案例

2018/01/02 Javascript

vue 搭建后台系统模块化开发详解

2019/05/01 Javascript

JS+canvas五子棋人机对战实现步骤详解

2020/06/04 Javascript

js实现圆形菜单选择器

2020/12/03 Javascript

删除目录下相同文件的python代码(逐级优化)

2012/05/25 Python

详解python单元测试框架unittest

2018/07/02 Python

详解python--模拟轮盘抽奖游戏

2019/04/12 Python

在python3中实现更新界面

2020/02/21 Python

解决pycharm debug时界面下方不出现step等按钮及变量值的问题

2020/06/09 Python

如何基于Python pygame实现动画跑马灯

2020/11/18 Python

英国最好的温室之家：Greenhouses Direct

2019/07/13 全球购物

成功的酒店创业计划书

2013/12/27 职场文书

排查整治工作方案

2014/06/09 职场文书

禁止酒驾标语

2014/06/25 职场文书

项目合作意向书模板

2014/07/29 职场文书

个人贷款收入证明

2014/10/26 职场文书

英语导游词

2015/02/13 职场文书

2016年高校自主招生自荐信范文

2015/03/24 职场文书