• <var id="zvtmq"></var>
      <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

      <font id="zvtmq"></font>

      <tt id="zvtmq"></tt>

        <var id="zvtmq"></var>
        <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

        1. 
          

          <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

            <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
            <strike id="zvtmq"><output id="zvtmq"></output></strike>

          1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

          2. <small id="zvtmq"></small>

            <code id="zvtmq"><rt id="zvtmq"></rt></code>
          3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                  您的?#24674;茫?a href="portal.php">网站首页> 实例代码> CSS3实例

                  CSS鼠标悬浮图片模糊切换效果

                  2018-4-25 09:20| 作者: antzone| 查看: 9442| 评论: 0|来自: 蚂蚁部落

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

                  默认状态下,图片是模糊?#27169;?#24403;鼠标悬浮那么图片会恢复正常状态。

                  代码实例如下:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!doctype html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <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属性一章节。


                  鲜花
                  1

                  握手

                  雷人

                  路过

                  鸡蛋

                  刚表态过的朋友 (1 人)

                  最新评论

                  返回顶部
                1. <var id="zvtmq"></var>
                    <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                    <font id="zvtmq"></font>

                    <tt id="zvtmq"></tt>

                      <var id="zvtmq"></var>
                      <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                      1. 
                        

                        <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                          <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                          <strike id="zvtmq"><output id="zvtmq"></output></strike>

                        1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                        2. <small id="zvtmq"></small>

                          <code id="zvtmq"><rt id="zvtmq"></rt></code>
                        3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                快乐10分破解如何计算
                              1. <var id="zvtmq"></var>
                                  <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                  <font id="zvtmq"></font>

                                  <tt id="zvtmq"></tt>

                                    <var id="zvtmq"></var>
                                    <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                    1. 
                                      

                                      <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                        <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                        <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                      1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                      2. <small id="zvtmq"></small>

                                        <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                      3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                            1. <var id="zvtmq"></var>
                                                <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                                <font id="zvtmq"></font>

                                                <tt id="zvtmq"></tt>

                                                  <var id="zvtmq"></var>
                                                  <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                                  1. 
                                                    

                                                    <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                                      <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                                      <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                                    1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                                    2. <small id="zvtmq"></small>

                                                      <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                                    3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                                            20190604022快三开奖结果 35选7达芬奇密码 排列五走势图带连线表 湖北快3预测图7月5 3d中奖彩民技巧贴子 通比牛牛源码 腾讯彩票比分 河南新快赢481彩票网 北京快3助手安卓下载 1丨选5开奖结果 ag真人竞咪 体彩6场半全场开奖结果 澳洲三分彩走势图 欲钱看天庭 特码风云