基于CSS3实现图片模糊过滤效果

本文给大家介绍基于css3实现的图片模糊过滤效果,当鼠标放上后其它图片模糊,鼠标所在位置的图片清晰,很好的分辨出当前的图片,对css3代码实现模糊过滤效果感兴趣的朋友一起学习吧

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

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

代码如下所示:

CSS Code复制内容到剪贴板
  1. "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  2. "http://www.w3.org/1999/xhtml">   
  3.   
  4.     "Content-Type" content="text/html; charset=utf-8" />   
  5.     css3图片模糊过滤特效-柯乐义   
  6.        
  7.   
  8.   
  9.     "width: 736px; margin: 0px auto;">

    css3图片模糊过滤特效·柯乐义

      
  10.         请使用支持CSS3的浏览器,移动光标到图片上。 "http://keleyi.com/a/bjad/yin8b5eb.htm" target="_blank">原文   
  11.     
  
  •     "keleyi">   
  •         
  •   
  •             src="http://keleyi.com/image/a/mdvii14p.webp">
  •   
  •         
  •   
  •             src="http://keleyi.com/image/a/968oqhtf.webp">
  •   
  •         
  •   
  •             src="http://keleyi.com/image/a/crgi0c5y.webp">
  •   
  •        
  •   
  •   
  • 以上代码就是本文的全部内容,代码简单易懂,相信大家都可以看得懂吧,有任何问题欢迎随时给我留言,我会在第一时间和大家联系的。谢谢大家一直以来对易知道|edz.cc网站的支持,有你们的关注我们会做的更好,谢谢!

    以上就是基于CSS3实现图片模糊过滤效果的详细内容,更多请关注易知道|edz.cc其它相关文章!

    推荐阅读