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

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

分类:CSS_CSS3 答疑 - 常见问题 · 发布时间:2021-12-21 09:28 · 阅读:4287

本文给大家介绍基于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.jpg-600">
  •   
  •         
  •   
  •             src="http://keleyi.com/image/a/968oqhtf.jpg-600">
  •   
  •         
  •   
  •             src="http://keleyi.com/image/a/crgi0c5y.jpg-600">
  •   
  •        
  •   
  •   
  • 以上代码就是本文的全部内容,代码简单易懂,相信大家都可以看得懂吧,有任何问题欢迎随时给我留言,我会在第一时间和大家联系的。谢谢大家一直以来对html中文网网站的支持,有你们的关注我们会做的更好,谢谢!

    标签:
    css3模糊效果

    相关文章

    css3媒体查询中device-width和width的区别详解

    这篇文章主要介绍了css3媒体查询中device-width和width的区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    CSS3媒体查询实现不同宽度的下不同内容的展示功能

    这篇文章主要介绍了CSS3媒体查询实现不同宽度的下不同内容的展示功能,本章节我们将为大家演示一些多媒体查询实例,需要的朋友可以参考下

    CSS3几种实现子容器水平垂直居中的方法

    本文有几种方法可以实现容器与子容器水平垂直居中,主要包括Flexbox布局,position绝对定位+transform,表格布局,具有一定的参考价值,感兴趣的可以了解一下

    css3实现文字首尾衔接跑马灯的示例代码

    这篇文章主要介绍了css3实现文字首尾衔接跑马灯的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    CSS的浮动及清除浮动的5种方法介绍

    这篇文章主要为大家介绍了CSS的浮动及清除浮动的5种方法介绍,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

    返回分类 返回首页