<!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. nodejs的child_process同步异步

    nodejs是一种单线程模型,但是,使用nodejs的child_process模块可以实现多进程任务.利用child_process可以创建子进程,实现子进程和主进程之间的通信. nodejs v0 ...

  2. 【Swift 2.1】为 UIView 添加点击事件和点击效果

    前言 UIView 不像 UIButton 加了点击事件就会有点击效果,体验要差不少,这里分别通过自定义和扩展来实现类似 UIButton 的效果. 声明 欢迎转载,但请保留文章原始出处:) 博客园: ...

  3. 使用 UICollectionView 实现日历签到功能

    概述 在 App 中,日历通常与签到功能结合使用.是提高用户活跃度的一种方式,同时,签到数据中蕴含了丰富的极其有价值的信息.下面我们就来看看如何在 App 中实现日历签到功能. 效果图 ..... 思 ...

  4. WebForm（二）——控件和数据库连接方式

    一.简单控件 1.Label(作用:显示文字) Web中: <asp:Label ID="Label1" runat="server" Text=&quo ...

  5. 《java JDK7 学习笔记》之对象封装

    1.构造函数实现对象初始化流程的封装.方法封装了操作对象的流程.java中还可以使用private封装对象私有数据成员.封装的目的主要就是隐藏对象细节,将对象当做黑箱子进行操作. 2.在java命名规 ...

  6. 大数据系列（4）——Hadoop集群VSFTP和SecureCRT安装配置

    前言 经过前三篇文章的介绍,已经通过VMware安装了Hadoop的集群环境,当然,我相信安装的过程肯定遇到或多或少的问题,这些都需要自己解决,解决的过程就是学习的过程,本篇的来介绍几个Hadoop环 ...

  7. linux安装VirualBox虚拟机

    第一步:安装VNC 1. 安装vnc yum install -y tigervnc* 2.启动vncserver [root@xxx ~]# vncserver You will require a ...

  8. hortonworks2.5.3 install step log

    1.创建本地YUM源,下载TAR.GZ HDP,HDP-UTILS,AMBARI介质安装HTTPD,在/VAR/WWW/HTML/下创建三个相应的目录,把以上解压的三个目录链接过来在三个目录中执行命令 ...

  9. Neutron 理解 (3): Open vSwitch + GRE/VxLAN 组网 [Netruon Open vSwitch + GRE/VxLAN Virutal Network]

    学习 Neutron 系列文章: (1)Neutron 所实现的虚拟化网络 (2)Neutron OpenvSwitch + VLAN 虚拟网络 (3)Neutron OpenvSwitch + GR ...

  10. 浅谈Java中的equals和==

    浅谈Java中的equals和== 在初学Java时,可能会经常碰到下面的代码: String str1 = new String("hello"); String str2 = ...