<!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. yii2批量添加的问题

    作者:白狼 出处:http://www.manks.top/yii2_batch_insert.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否 ...

  2. Zookeeper 原理

    ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,它包含一个简单的原语集,分布式应用程序可以基于它实现同步服务,配置维护和命名服务等.Zookeeper是hadoop的一个子项目,其 ...

  3. Windows 10 IoT Serials 2 - Windows 10 IoT RTM 升级教程

    7月29日,微软推出了Windows 10 for PC的正式版,其版本号是Build 10240.近两天官方说已经有4700万的下载安装量,同时这个数字还在不断攀升.另外,除了Windows 10 ...

  4. iOS AppIcon尺寸和上传ITunes构建版本尺寸

    避免忘记. 记录一下 App Icon: 29X2940X4058X5876X7687X8780X80120X120152X152167X167180X180 ITunes构建版本: 1242 x 2 ...

  5. ubuntu16.04连接android手机蓝牙共享网络热点

    最近的想要用android手机蓝牙共享wifi网络给ubuntu16.04系统用,查了好多资料,发现网上很少有有用的.自己实践后分享如下. 第一步:手机与电脑配对:         该步骤比较简单,网 ...

  6. 004.测试解析php，安装discuz

    一.配置解析php 编辑nginx配置文件/usr/local/nginx/conf/nginx.conf [root@huh ~]# vim /usr/local/nginx/conf/nginx. ...

  7. Linux 使用iostat分析IO性能

    原文:http://www.cnblogs.com/bangerlee/articles/2547161.html 对于I/O-bond类型的进程,我们经常用iostat工具查看进程IO请求下发的数量 ...

  8. 编译软件基础知识(2/2) via LinuxSir

    首先说下/etc/ld.so.conf: 这个文件记录了编译时使用的动态链接库的路径. 默认情况下,编译器只会使用/lib和/usr/lib这两个目录下的库文件 如果你安装了某些库,比如在安装gtk+ ...

  9. Python 数据类型及其用法

    本文总结一下Python中用到的各种数据类型,以及如何使用可以使得我们的代码变得简洁. 基本结构 我们首先要看的是几乎任何语言都具有的数据类型,包括字符串.整型.浮点型以及布尔类型.这些基本数据类型组 ...

  10. openstack学习（二）虚拟机XML文件

    1 , XML文件 <domain type='kvm'> //如果是Xen,则type=‘xen’ <name>ubuntu</name> //虚拟机名称,同一物 ...