CSS3怎么实现图片模糊过滤效果

发布时间:2021-08-05 21:30:05 作者:chen
来源:亿速云 阅读:147

本篇内容主要讲解“CSS3怎么实现图片模糊过滤效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS3怎么实现图片模糊过滤效果”吧!

先给大家展示下效果图,如果和你想象的效果一样请继续往下看。

CSS3怎么实现图片模糊过滤效果

css3图片过滤效果,鼠标放上后其它图片模糊,鼠标所在位置的图片是清淅的,有效索引出当前的图片,对图片的模糊处理是本特效的亮点,你完全可以将模糊的效果应用于其它的图片特效中,你同样也可借此代码研究一下HTML5中的CSS3技术。

代码如下所示:

CSS Code复制内容到剪贴板

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   

  2. <html xmlns="http://www.w3.org/1999/xhtml">   

  3. <head>   

  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   

  5.     <title>css3图片模糊过滤特效-柯乐义</title>   

  6.     <style>   

  7. .keleyi img{ width:200pxheight:200px;}   

  8.     .keleyi{   

  9.       list-stylenone;   

  10.       margin10px autopadding: 0;   

  11.       width642px/* (200+10+4)x3 */  

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

  13.     }   

  14.     .keleyi li{   

  15.         displayinline-block;   

  16.         *displayinline;   

  17.         zoom: 1;   

  18.         width200pxheight200px;   

  19.         margin2px;   

  20.         border5px solid #fff;   

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

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

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

  24.         -webkit-transition: all .3s ease;   

  25.         -moz-transition: all .3s ease;   

  26.         -ms-transition: all .3s ease;   

  27.         -o-transition: all .3s ease;   

  28.         transition: all .3s ease;          

  29.     }   

  30.     .keleyi:hover li:not(:hover){         

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

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

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

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

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

  36.         opacity: .7; /* fallback */          

  37.     }   

  38.   </style>   

  39. </head>   

  40. <body>   

  41.     <div style="width: 736px; margin: 0px auto;"><h3>css3图片模糊过滤特效&middot;柯乐义</h3>   

  42.         请使用支持CSS3的浏览器,移动光标到图片上。 <a href="http://keleyi.com/a/bjad/yin8b5eb.htm" target="_blank">原文</a>   

  43.     </div>   

  44.     <ul class="keleyi">   

  45.         <li>   

  46.             <img src="http://keleyi.com/image/a/mdvii14p.jpg"></li>   

  47.         <li>   

  48.             <img src="http://keleyi.com/image/a/968oqhtf.jpg"></li>   

  49.         <li>   

  50.             <img src="http://keleyi.com/image/a/crgi0c5y.jpg"></li>   

  51.     </ul>   

  52. </body>   

  53. </html>  

到此,相信大家对“CSS3怎么实现图片模糊过滤效果”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

推荐阅读:
  1. css3 filter属性 给图片添加毛玻璃模糊效果
  2. CSS3怎么实现翻转图片效果

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css3

上一篇:Ubuntu上怎么使用SSHfs把远程文件系统挂载到本地目录

下一篇:如何解决某些HTML字符打不出来的问题

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》