<!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. React Native之FlexBox介绍和使用

    # 前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会 ...

  2. IOS开发基础知识--碎片3

    十二:判断设备 //设备名称 return [UIDevice currentDevice].name; //设备型号,只可得到是何设备,无法得到是第几代设备 return [UIDevice cur ...

  3. 活用UML-软件设计高手（广州 2014年6月14-15日）

    我们将在广州为您奉献高级技术课程”活用UML-软件设计高手“,首席专家张老师将会为您分享软件架构设计.数据库设计.用户体验设计及详细设计的最佳实践,帮助您成为优秀的软件设计师! 时间:2014.06. ...

  4. ref

    ref:  当控制权传递回调用方法时,在方法中对参数的任何更改都将反映在该变量中. 例如: class RefExample { //使用ref返回的函数 static void Method(ref ...

  5. Hive 分组问题

    group by 中出现的字段不能再select 后面单独显示,必须配合函数使用 上面中的 ' group by id 总结: Hive不允许直接访问非group by字段: 对于非group by字 ...

  6. hive建表与数据的导入导出

    建表: create EXTERNAL table tabtext(IMSI string,MDN string,MEID string,NAI string,DestinationIP string ...

  7. 萌新笔记——C++里创建 Trie字典树（中文词典）（一）（插入、遍历）

    萌新做词典第一篇,做得不好,还请指正,谢谢大佬! 写了一个词典,用到了Trie字典树. 写这个词典的目的,一个是为了压缩一些数据,另一个是为了尝试搜索提示,就像在谷歌搜索的时候,打出某个关键字,会提示 ...

  8. 编程中Foo, Bar 到底什么意思？

    1 前言 在很多国外计算机书本和一些第三份开源软件的Demo中经常用到两个英文单词Foo,Bar.这到底是什么意思呢?从步入屌丝界的IT生活见到这两个单词到现在我还是不知道这两个单词的真正含义,今天有 ...

  9. [很郁闷]python2.7连接mysql5.5配置

    前言:今天在公司电脑上python版本跟自己家里电脑上的一样,不一样的是mysql公司版本5.6,结果花了两天的时间都没配置好python和mysql 简单说就是python连接mysql一直报200 ...

  10. 谈谈Java中的ThreadLocal

    什么是ThreadLocal ThreadLocal一般称为线程本地变量,它是一种特殊的线程绑定机制,将变量与线程绑定在一起,为每一个线程维护一个独立的变量副本.通过ThreadLocal可以将对象的 ...