CSS3图片模糊切换效果

Posted 蚂蚁开源社区

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 class="gallery">

<li><img ></li>

<li><img ></li>

<li><img ></li>

<li><img ></li>

<li><img ></li>

<li><img ></li>

</ul>

<div style="margin: 0 auto; text-align:center"><a href="http://bbs.zzfriend.com" target="_blank" title="bbs.zzfriend.com">html5-html5_css3教程-基于html5手机app开发技术交流平台</a></div>

</body>

</html>


源码演示/下载请点击阅读原文

↓↓↓↓↓↓

以上是关于CSS3图片模糊切换效果的主要内容,如果未能解决你的问题,请参考以下文章

CSS3实现毛玻璃(图片模糊)效果

css3怎么实现模糊遮挡的效果

css3模糊图片

[转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭

Android 图片及文字模糊效果

iOS开发-图片高斯模糊效果