CSS3图片模糊切换效果

　　今天我们来分享一款利用CSS3技术让图片模糊的效果，我们只需要将鼠标滑过图片，就可以让图片产生模糊的特效，利用CSS3实现图片模糊效果也非常简单，用CSS3中的filter属性即可，针对不同浏览器用-webkit-filter、-moz-filter、-o-filter和-ms-filter。

　　<!DOCTYPE html>

　　<html>

　　<head>

　　<title>css3图片过滤效果 </title>

　　<style>

　　body{

　　background: #eee;

　　}

　　.gallery{

　　list-style: none;

　　margin: 50px auto; padding: 0;

　　width: 642px; /* (200+10+4)x3 */

　　font-size: 0; /* fix inline-block spacing */

　　}

　　.gallery li{

　　display: inline-block;

　　*display: inline;

　　zoom: 1;

　　width: 200px; height: 150px;

　　margin: 2px;

　　border: 5px solid #fff;

　　-moz-box-shadow: 0 2px 2px rgba(0,0,0,.1);

　　-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.1);

　　box-shadow: 0 2px 2px rgba(0,0,0,.1);

　　-webkit-transition: all .3s ease;

　　-moz-transition: all .3s ease;

　　-ms-transition: all .3s ease;

　　-o-transition: all .3s ease;

　　transition: all .3s ease;

　　}

　　.gallery:hover li:not(:hover){

　　-webkit-filter: blur(2px) grayscale(1);

　　-moz-filter: blur(2px) grayscale(1);

　　-o-filter: blur(2px) grayscale(1);

　　-ms-filter: blur(2px) grayscale(1);

　　filter: blur(2px) grayscale(1);

　　opacity: .7; /* fallback */

　　}

　　/* Demo page only */

　　#about{

　　color: #999;

　　text-align: center;

　　font: 0.9em Arial, Helvetica;

　　}

　　#about a{

　　color: #777;

　　}

　　</style>

　　</head>

　　<body>

　　</ul>

　　<div style="margin: 0 auto; text-align:center"><a href="http://bbs.zzfriend.com" target="_blank" title="bbs.zzfriend.com">前端技术学习群：784783012</a></div>

　　</body>

　　</html>

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h62834.shtml