<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
width:1100px;
margin: 20px auto;
letter-spacing: -4px;
word-spacing: -4px;
font-size: 0;
}
li{
margin: 5px;
}
ul li img{
width: 200px;
height: 150px;

}
ul li{
list-style: none;
display: inline-block;
border: 1px solid #ccc;
box-shadow: 0 0 5px #000;
}
.gallery li:nth-child(2){
-webkit-filter:grayscale(1);/*灰度*/
}
.gallery li:nth-child(3){
-webkit-filter:sepia(1);/*褐色*/
}
.gallery li:nth-child(4){
-webkit-filter:saturate(0.5);/*用乌贼墨颜料*/
}
.gallery li:nth-child(5){
-webkit-filter:hue-rotate(90deg);/*色彩-旋转*/
}
.gallery li:nth-child(6){
-webkit-filter:invert(1);/*颠倒-反转*/
}
.gallery li:nth-child(7){
-webkit-filter:opacity(0.2);/*透明度*/
}
.gallery li:nth-child(8){
-webkit-filter:blur(3px);/*模糊度*/
}
.gallery li:nth-child(9){
-webkit-filter:drop-shadow(5px 5px 5px #ccc);/*降下-阴影*/
}
.gallery li:nth-child(10){
-webkit-filter:saturate(6) hue-rotate(361deg) brightness(.6);/*用乌贼墨颜料 色彩-旋转 */
}
.gallery li:not(:hover){
-webkit-filter:blur(2px) grayscale(1);/*模糊度 */
}
/*filter 10种特效*/
/*grayscale灰度*/
/*sepia褐色（求专业指点翻译）*/
/*saturate饱和度*/
/*hue-rotate色相旋转*/
/*invert反色*/
/*opacity透明度*/
/*brightness亮度*/
/*contrast对比度*/
/*blur模糊*/
/*drop-shadow阴影*/

</style>
</head>
<body>
<ul class="gallery">
<li><img src="img/tutu.png"></li>
<li><img src="img/tutu.png"></li>
<li><img src="img/tutu.png"></li>
<li><img src="img/tutu.png"></li>
<li><img src="img/tutu.png"></li>
<li><img src="img/tutu.png"></li>
<li><img src="img/tutu.png"></li>
<li><img src="img/tutu.png"></li>
<li><img src="img/tutu.png"></li>
<li><img src="img/tutu.png"></li>
</ul>

</body>
</html>

使用css3 filter 实现移入背景变色效果的更多相关文章

  1. 第161天：CSS3实现兼容性的渐变背景(gradient)效果

    CSS实现兼容性的渐变背景(gradient)效果 一.有点俗态的开场白 在对CSS3支持日趋完善的今天,实现兼容性的渐变背景效果已经完全成为可能,本文就将展示如何实现兼容性的渐变背景效果.在众多的浏 ...

  2. css3伪放大镜(图片放大动画)效果(鼠标移入圆形区域放大图片)

    源码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&q ...

  3. 利用css3新增选择器制作背景切换

    之前写css3的时间都是捡项目需要的来用,没有系统的学习过,这几天好好的补了一下css3的知识,真的获益匪浅!觉得新增的那些选择器是有用至极的!今天就来所这几天的所学做一个点击标签切换背景的效果,是纯 ...

  4. CSS3 Filter详解（改变模糊度 亮度 透明度等方法）

    CSS3 Filter(滤镜)属性提供了提供模糊和改变元素颜色的功能.CSS3 Fitler 常用于调整图像的渲染.背景或边框显示效果. -webkit-filter是css3的一个属性,Webkit ...

  5. CSS3动画：流彩文字效果+图片模糊效果+边框伸展效果实现

    前言 首先第一步,先布局html代码如下: <div class="wrap"> <img src="images/1.jpg" class= ...

  6. CSS3 filter 模糊滤镜的应用

    CSS3 filter 模糊滤镜的应用   在segmentfault上回答过的一个问题,如何将网页CSS背景图高斯模糊且全屏显示当时没有深入了解,只觉得滤镜应该只是应用于图片上的.而且各大网站的de ...

  7. 巧用 CSS3 filter(滤镜) 属性

    原文链接:CSS3 filter(滤镜) 属性 效果预览 filter: grayscale(100%); 定义和使用 filter 属性定义了元素(通常是<img>)的可视效果(例如:模 ...

  8. 美妙的 CSS3 动画！一组梦幻般的按钮效果

    今天给大家带来的是五款梦幻般的动画按钮效果.下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保 ...

  9. 怎样实现excel隔行隔列变色效果的方法

    大家在使用excel的过程中,一定见过别人编排的excel文档,隔行添加单元格背景颜色,也就是通常所说的隔行变色效果.Excel中隔行变色效果的好处是:当在Excel中浏览一个非常大的工作簿中的数据时 ...

随机推荐

  1. 隐式启动判断是否有匹配的Intent

    一.PackageManager的resolveActivity public abstract ResolveInfo resolveActivity(Intent intent, int flag ...

  2. iOS 为什么app都是异步编程

    iOS 为什么app都是异步编程 对本文题目首先需要了解一下什么是异步编程,异步编程即多线程编程. 多线程是一个比较轻量级的方法来实现单个应用程序内多个代码执行路径. 在具体理解多线程之前先看一个都理 ...

  3. 基于Ruby的watir-webdriver自动化测试方案与实施（三）

    接着基于Ruby的watir-webdriver自动化测试方案与实施(二) http://www.cnblogs.com/Javame/p/4159468.html 继续 ... ...   编写脚本 ...

  4. Linux - expect自动化远程登录脚本

    简单模式: #!/usr/bin/expect -f spawn ssh root@192.168.0.1 expect "*assword*" send "root\r ...

  5. java入门知识点结构

    第一部分    计算机程序和面向对象编程 编程语言种类: 机器语言:2进制(0和1) 汇编语言:英文字符缩写和助记符 高级语言: 面向过程:面向过程是从微观上/细节上处理具体事务. C语言 面向对象: ...

  6. ORACLE数据库SQL语句的执行过程

    SQL语句在数据库中处理过程是怎样的呢?执行顺序呢?在回答这个问题前,我们先来回顾一下:在ORACLE数据库系统架构下,SQL语句由用户进程产生,然后传到相对应的服务端进程,之后由服务器进程执行该SQ ...

  7. java实现支付宝接口--文档..转载

    //实现java支付宝很简单,只要从支付宝官方下载   http://help.alipay.com/support/index_sh.htm下载程序,配置一下参数就OK了:   1.先到http:/ ...

  8. Tips for Planning Your Business Startup

    原文链接:http://domaintree.me/?p=1037 By Robert Thibodeau –  Starting a business can be a very daunting ...

  9. css工具收集

    收集一些css的生成工具,开发中可以直接拿过来用.特别是那些css3中的一些新的特性. 1  css渐变背景在线生成工具      http://www.colorzilla.com/gradient ...

  10. ununtu设置开机启动服务-手工将Tomcat设为自启动服务

    配置Ubuntu Server,上面装了一Tomcat7,希望在服务器电源打开后,希望没有登录的情况下也可以自动启动Tomcat 1.编写启动文件/etc/init.d/tomcat7 tomcat7 ...