<!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. Android Hack1 使用weight属性实现视图的居中显示

    本文地址:http://www.cnblogs.com/wuyudong/p/5898403.html,转载请注明源地址. 如果要实现如下图所示的将按钮居中显示,并且占据父视图的一半,无论屏幕是否旋转 ...

  2. 解决：eclipse删除工程会弹出一个对话框提示“[project_name]”contains resources that are not in sync with"[workspace_name...\xx\..xx\..\xx]"

    提示“[project_name]”contains resources that are not in sync with"[workspace_name...\xx\..xx\..\xx ...

  3. python之socket－ssh实例

    本文转载自大王http://www.cnblogs.com/alex3714/articles/5830365.html 加有自己的注释,应该会比原文更突出重点些 一. 基本Socket实例 前面讲了 ...

  4. SQL Server 监控统计阻塞脚本信息

        数据库产生阻塞(Blocking)的本质原因 :SQL语句连续持有锁的时间过长 ,数目过多, 粒度过大.阻塞是事务隔离带来的副作用,它是不可避免的,而且是一个数据库系统常见的现象. 但是阻塞的 ...

  5. CDH离线数据导入solr：利用MapReduceIndexerTool将json文件批量导入到solr

    场景描述:前段时间,将实时数据通过kafka+flume+morphline的方式接入到solr中.新进来的数据已经可以在solr中看到了,但是以前的历史数据还没有导入solr. CDH提供利用Map ...

  6. oracle 使用 dbms_lock.sleep暂停存储过程执行

    grant execute on dbms_lock to USERNAME;   dbms_lock.sleep(time)参数单位为秒   create or replace procedure ...

  7. 【转】jquery 中scrollTop在Firefox下不起作用

    原文链接:http://stackoverflow.com/questions/8149155/animate-scrolltop-not-working-in-firefox Animate scr ...

  8. redis配置文件redis.conf中文版

    转账自:http://www.jb51.net/article/50605.htm # Redis示例配置文件 # 注意单位问题:当需要设置内存大小的时候,可以使用类似1k.5GB.4M这样的常见格式 ...

  9. QuickHit游戏

    一 项目需求 根据输入速率和正确率将玩家分为不同级别,级别越高,一次显示的字符数越多,玩家正确输入一次的得分也越高.如果玩家在规定时间内完成规定次数的输入,正确率达到规定要求,则玩家升级(为了简单起见 ...

  10. 学UNITY的基础

    先看线性代数教材 再看计算机图形学第三章-几何造型技术 和第五章的法向量高等数学教材   的基础 就没有任何疑问了