上面的图片就是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. python第九周：paramiko多线程、队列

    1.paramiko模块 用处:连接远程服务器并执行相关操作 使用方法: SSHClient:连接远程服务器并执行基本命令 import paramiko #创建SSH对象 ssh = paramik ...

  2. fzu 2087并查集的运用求最小生成树的等效边

    //对数组排序后,对于边相同并且边的两端不在一个集合内的一定是等效边或者必加边, //第一数数,第二合并集合 #include<stdio.h> #include<stdlib.h& ...

  3. LightOJ - 1232 - Coin Change (II)

    先上题目: 1232 - Coin Change (II)   PDF (English) Statistics Forum Time Limit: 1 second(s) Memory Limit: ...

  4. 11gR2 集群(CRS/GRID)新功能—— SCAN(Single Client Access Name)

    https://blogs.oracle.com/database4cn/11gr2-crsgrid-scansingle-client-access-name

  5. Leading and Trailing

    You are given two integers: n and k, your task is to find the most significant three digits, and lea ...

  6. MYSQL 技术内幕 博客学习

    http://blog.csdn.net/CCyutaotao/article/category/6147849/3

  7. android发送get请求时报错

    异常信息: java.lang.RuntimeException: Unable to start activity ComponentInfo{com.synology.synologycloud/ ...

  8. java中的移位操作

    java中的移位操作仅仅对; a = a << 2; System.out.println(a); System.out.println(Integer.toBinaryString(a) ...

  9. Google面试题-高楼扔鸡蛋问题

    本文由 @lonelyrains 出品.转载请注明出处.  文章链接: http://blog.csdn.net/lonelyrains/article/details/46428569 高楼扔鸡蛋问 ...

  10. 【JNI探索之路系列】之七：JNI要点总结

    作者:郭嘉 邮箱:allenwells@163.com 博客:http://blog.csdn.net/allenwells github:https://github.com/AllenWells ...