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

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

　　　　<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>　　　　　　　
　　　　　　<body>
　　　　　　　　　<div id="div1">

			<img src="img/001V28Mwty6Fww02IiNad&690.jpg">

			<p>灰色滤镜</p>

		</div>
　　　　　　</body>

　　

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

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

　　　　　　　　#div1 img{

　　　　　　　　/*把div1里面的图片百分百，等同于相对于在div1里面百分比放大填充*/

　　　　　　　　　　width: %;
　　　　　　　/*把图片变成黑白色括号里跟颜色变化的值，只能取0~1之间*/
　　　　　　　　　　-webkit-filter: grayscale(); 　　　　　　　　　　}

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

#div1 img{

            width: %;

            -webkit-filter: sepia();

        }

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

#div1 img{

            width: %;

            -webkit-filter: hue-rotate(200deg);

        }

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

#div1 img{

            width: %;

            -webkit-filter: opacity(0.5);

        }

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

#div4 img{

            width: %;

            -webkit-filter: opacity(0.5);

        }

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

css3的过滤效果的更多相关文章

  1. css3图片过滤效果

    在线演示 本地下载

  2. css3图片模糊过滤效果

    css3图片过滤效果,鼠标放上后其它图片模糊,鼠标所在位置的图片是清淅的,有效索引出当前的图片,对图片的模糊处理是本特效的亮点,你完全可以将模糊的效果应用于其它的图片特效中,你同样也可借此代码研究一下 ...

  3. CSS3实战开发:使用CSS3实现photoshop的过滤效果

    原文:CSS3实战开发:使用CSS3实现photoshop的过滤效果 我们知道,使用Photoshop来调整图像的亮度和对比度,或者将图片转化为灰度等等是很常见的功能.今天我将给大家介绍几个新特性,我 ...

  4. [刘阳Java]_纯CSS代码实现内容过滤效果

    继续我们技术专题课,我们今天给大家带来的是一个比较酷炫的"纯CSS代码实现内容过滤效果",没有加入任何JS的效果.全部都是应用CSS3的新增选择器来实现的.先看效果截图 实现思路 ...

  5. Image Wall - jQuery & CSS3 图片墙效果

    今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...

  6. css3的transition效果和transfor效果

    <!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. css3幻灯片换位效果

    <title>css3幻灯片换位效果</title> <style type="text/css">  .flowGallery {width: ...

  8. 第八十节，CSS3边框图片效果

    CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一．属性解释     CSS3 ...

  9. html+css3实现长方体效果

    网上大都是正方体的效果,由于做一个东西需要,写了一个HTML+css3实现的长方体,有需要的也可以看看.                   2017-07-25         21:30:23 h ...

随机推荐

  1. Java 并行 (2): Monitor

    转自:http://www.cnblogs.com/tomsheep/archive/2010/06/09/1754419.html 1. 什么是Monitor? Monitor其实是一种同步工具,也 ...

  2. ES6中的Symbol

    ---恢复内容开始--- Symbol 1.1 概述 保证每个属性的名字都是独一无二的就好了,这样就从根本上防止属性名的冲突.这就是 ES6 引入Symbol的原因 在es6之前,JavaScript ...

  3. Co-prime

    Co-prime Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Problem ...

  4. netty自定义协议 心跳 断线重连源码

    https://github.com/aa1356889/NettyHeartbeat

  5. 洛谷——P2038 无线网络发射器选址

    https://www.luogu.org/problem/show?pid=2038 题目描述 随着智能手机的日益普及,人们对无线网的需求日益增大.某城市决定对城市内的公共场所覆盖无线网. 假设该城 ...

  6. Storm工作流程 vs. Spark Stream

    看的这个学习课程: http://study.163.com/course/courseLearn.htm?courseId=1002887002#/learn/video?lessonId=1003 ...

  7. [Angular] Freshness Caching Policy - Network First, Cache Last

    In some cases, you want to get fresh data instead of cache data to the screen, such as stock applica ...

  8. hdu 4586 Play the Dice （概率+等比数列）

    Play the Dice Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others) To ...

  9. 相似 nginx 编译时生成函数链表

    下面代码可能须要一定的c/c++基础. 须要有一些函数指针的知识 深度剖析函数指针点击这里 common.h #pragma once typedef int (*pt)(void); void in ...

  10. 支付宝钱包手势password破解实战（root过的手机可直接绕过手势password）

    /* 本文章由 莫灰灰 编写,转载请注明出处. 作者:莫灰灰    邮箱: minzhenfei@163.com */ 背景 随着移动互联网的普及以及手机屏幕越做越大等特点,在移动设备上购物.消费已是 ...