• 工信部:17年12批新能源车推荐车型目录 2019-05-11
  • 美国再挑贸易战,中方强力回击,全球市场跌声一片 2019-05-11
  • 四川都江堰再现野生大熊猫踪迹 比3月拍到的更肥 2019-05-10
  • 坚持和发展马克思主义的宣言书 2019-05-10
  • 解析视频播控平台黑产链 20元看12家网站VIP会员视频 2019-04-26
  • 众星云集 “欧洲红魔”能否用战绩兑现黄金一代的天赋 2019-04-26
  • 比如最高检的12309检查服务中心,原来还有显示信访处理进程,不过没有几天就取消了。[上火][上火] 也就是说办与不办也没有人知道,下边省事了,上边也就轻松了。 2019-04-16
  • 男女差别有多大?河北省首次公开发布分性别统计分析报告 2019-04-05
  • 菲律宾媒体和网民热议"中国剧场"开播 2019-04-05
  • 坚持和完善我国基本经济制度的两条新经验 2019-04-02
  • 5月份61城房价环比反弹 多地调控政策或再加码 ——凤凰网房产济南 2019-04-02
  • [洞见]草榴死了 欲望还活着草榴性 2019-04-02
  • 回顾:五年来习近平的“两会金句” 2019-04-02
  • 云南省2018年度国家社科基金项目申报工作的几点做法 2019-04-01
  • 地理君的专栏作者中国国家地理网 2019-04-01

    河北20选走势图:CSS鼠标悬浮图片模糊切换效果

    燕赵风采20选5走势图 www.fllv.net 2018-4-25 09:20| 作者: antzone| 查看: 5278| 评论: 0|来自: 蚂蚁部落

    分享一段代码实例,它实现了图片的模糊效果。

    默认状态下,图片是模糊的,当鼠标悬浮那么图片会恢复正常状态。

    代码实例如下:

    [HTML] 纯文本查看 复制代码运行代码
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="author" content="//www.fllv.net/" />
    <title>蚂蚁部落</title>
    <style type="text/css">
    body, html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
    .container {
      padding: 20px;
      position: relative;
      overflow: hidden;
    }
    img {
      height: 200px;
      transition: .5s ease-in-out;
    }
    .container div {
      width: 300px;
      overflow: hidden;
      float: left;
      margin-left: 40px;
    }
    .blur img {
      filter: blur(5px);
      -webkit-filter: blur(5px);
    }
    .blur img:hover {
      filter: blur(0);
      -webkit-filter: blur(0);
    }
    </style>
    </head>
    <body>
    <div class="blur container">
      <div>
        <img src="demo/CSS/img/gamesky.jpg" />
      </div>
    </div>
    </body>
    </html>

    上面的代码实现了我们的要求,更多内容可以参阅相关阅读。

    相关阅读:

    (1).transition可以参阅CSS3 transition一章节。

    (2).filter可以参阅css3 filter属性一章节。

    最新评论

    返回顶部
  • 工信部:17年12批新能源车推荐车型目录 2019-05-11
  • 美国再挑贸易战,中方强力回击,全球市场跌声一片 2019-05-11
  • 四川都江堰再现野生大熊猫踪迹 比3月拍到的更肥 2019-05-10
  • 坚持和发展马克思主义的宣言书 2019-05-10
  • 解析视频播控平台黑产链 20元看12家网站VIP会员视频 2019-04-26
  • 众星云集 “欧洲红魔”能否用战绩兑现黄金一代的天赋 2019-04-26
  • 比如最高检的12309检查服务中心,原来还有显示信访处理进程,不过没有几天就取消了。[上火][上火] 也就是说办与不办也没有人知道,下边省事了,上边也就轻松了。 2019-04-16
  • 男女差别有多大?河北省首次公开发布分性别统计分析报告 2019-04-05
  • 菲律宾媒体和网民热议"中国剧场"开播 2019-04-05
  • 坚持和完善我国基本经济制度的两条新经验 2019-04-02
  • 5月份61城房价环比反弹 多地调控政策或再加码 ——凤凰网房产济南 2019-04-02
  • [洞见]草榴死了 欲望还活着草榴性 2019-04-02
  • 回顾:五年来习近平的“两会金句” 2019-04-02
  • 云南省2018年度国家社科基金项目申报工作的几点做法 2019-04-01
  • 地理君的专栏作者中国国家地理网 2019-04-01
  • 北京pk10骗局大揭秘 黑龙江体彩6+1 时时彩全天连中计划 泳坛夺金481 双色球开奖号码走势图 幸运飞艇全部开奖记录 南国彩票论坛七星彩 体彩p5跨度走势图带连线图表 2016哪个彩票网站还在加奖 澳门在线博彩 北京赛车下注秘诀 北单比分直播 北京快乐8官网开奖记录 中国足彩网比分直播 北京快乐8开奖网站 体育彩票超级大乐透中奖规则