zoukankan html css js c++ java
仿百度图片毛玻璃效果

by 张鑫旭
代码:


<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="description" content="兼容性的局部模糊毛玻璃效果效果-百度图片首页示意 » 张鑫旭-鑫空间-鑫生活" />
  <meta name="description" content="张鑫旭web前端学习实例页面之兼容性的局部模糊毛玻璃效果效果-百度图片首页示意" />
  <meta name="keywords" content="css, jQuery, javascript" />
  <meta name="author" content="张鑫旭, zhangxinxu" />
  <title>兼容性的局部模糊毛玻璃效果效果-百度图片首页示意</title>
  <style>
    /* for IE7+ */

    html {
      overflow: hidden;
    }

    body {
      margin: 0;
      font-family: 'microsoft yahei';
      background-color: #9C5C1E;
    }

    html,
    body {
      height: 100%;
    }

    .hidden {
      display: none;
    }

    .back {
      position: absolute;
      right: 15px;
      top: 15px;
      padding: 1px 5px;
      background-color: #000;
      font-size: 14px;
      text-decoration: none;
      color: #fff;
      opacity: .8;
      filter: alpha(opacity=80);
    }

    .background {
      position: fixed;
      _position: absolute;
      width: 100%;
      top: 0;
      left: 0;
    }

    .container {
      width: 860px;
      height: 310px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin: -155px 0 0 -430px;
      /* IE9+ */
      background-color: rgba(255, 255, 255, .1);
      /* IE6-IE8 */
      filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#17FFFFFF, endColorStr=#17FFFFFF);
    }

    :root .container {
      filter: none;
    }

    .inner {
      padding: 10px 0 0 10px;
      overflow: hidden;
      _zoom: 1;
    }

    .list {
      width: 160px;
      height: 140px;
      float: left;
      margin: 0 10px 10px 0;
      position: relative;
      cursor: pointer;
      overflow: hidden;
    }

    .layer {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }

    .cover {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 30px;
      line-height: 30px;
      overflow: hidden;
    }

    .blur {
      position: absolute;
      width: 100%;
      bottom: 0;
      left: 0;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      /* blur */
      filter: url(blur-5px.svg#blur);
      /* css3 */
      -webkit-filter: blur(5px);
      -moz-filter: blur(5px);
      filter: blur(5px);
      /* FireFox 35+ support */
      /* IE6~IE9 */
      filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=5, MakeShadow=false);
      *left: -5px;
      left: -5px0;
    }

    :root .blur {
      left: -5px 0;
      /* Just IE9 */
    }

    .mask {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      /* IE9+ */
      background-color: rgba(0, 0, 0, .2);
      /* IE6-IE8 */
      filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#34000000, endColorStr=#34000000);
      color: #fff;
      font-size: 14px;
      text-indent: 10px;
    }

    :root .mask {
      filter: none;
    }

    /* affect */

    .list img,
    .list svg {
      -webkit-transition: all .25s;
      transition: all .25s;
      vertical-align: bottom;
    }

    .list:hover .layer,
    .list:hover .blur {
      -webkit-transform: scale(1.05) translateZ(0);
      -ms-transform: scale(1.05);
      transform: scale(1.05) translateZ(0);
      /* IE6-IE8 */
      zoom: 1.05;
    }

    :root .list:hover .layer,
    :root .list:hover .blur {
      zoom: 1;
    }
  </style>
</head>

<body>
  <svg class="hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <filter id="blur">
        <feGaussianBlur stdDeviation="5" />
      </filter>
    </defs>
  </svg>

  <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/xique1.jpg" class="background">

  <a href="http://www.zhangxinxu.com/wordpress/?p=4571" class="back">回到相关文章 &raquo;</a>

  <div class="container">
    <div class="inner">
      <div class="list">
        <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/sheying204b.jpg" class="layer">
        <div class="cover">
          <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/sheying204b.jpg" class="blur">
          <div class="mask">摄影</div>
        </div>
      </div>
      <div class="list">
        <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/lvyou204.jpg" class="layer">
        <div class="cover">
          <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/lvyou204.jpg" class="blur">
          <div class="mask">旅游</div>
        </div>
      </div>
      <div class="list">
        <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/mingixng204.jpg" class="layer">
        <div class="cover">
          <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/mingixng204.jpg" class="blur">
          <div class="mask">明星</div>
        </div>
      </div>
      <div class="list">
        <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/sheji204.jpg" class="layer">
        <div class="cover">
          <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/sheji204.jpg" class="blur">
          <div class="mask">设计</div>
        </div>
      </div>
      <div class="list">
        <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/chongwu204.jpg" class="layer">
        <div class="cover">
          <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/chongwu204.jpg" class="blur">
          <div class="mask">宠物</div>
        </div>
      </div>
      <div class="list">
        <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/shishang204.jpg" class="layer">
        <div class="cover">
          <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/shishang204.jpg" class="blur">
          <div class="mask">时尚</div>
        </div>
      </div>
      <div class="list">
        <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/bizhi204.jpg" class="layer">
        <div class="cover">
          <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/bizhi204.jpg" class="blur">
          <div class="mask">壁纸</div>
        </div>
      </div>
      <div class="list">
        <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/dongman204.jpg" class="layer">
        <div class="cover">
          <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/dongman204.jpg" class="blur">
          <div class="mask">动漫</div>
        </div>
      </div>
      <div class="list">
        <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/jiaju204.jpg" class="layer">
        <div class="cover">
          <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/jiaju204.jpg" class="blur">
          <div class="mask">家居</div>
        </div>
      </div>
      <div class="list">
        <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/qiche204.jpg" class="layer">
        <div class="cover">
          <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/qiche204.jpg" class="blur">
          <div class="mask">汽车</div>
        </div>
      </div>
    </div>
  </div>

  <script>
    //IE10+ blur  
    if (typeof document.msHidden != "undefined") {
      [].slice.call(document.querySelectorAll(".cover img")).forEach(function (img) {
        img.classList.add("hidden");

        var myImage = new Image(), src = img.src;
        img.insertAdjacentHTML("afterend", '<svg class="blur" width="160" height="140">
<image xlink:href="'+ src + '" src="' + src + '" width="160" height="140" y="0" x="0" filter="url(#blur)" />
</svg>');
      });
    }
  </script>
</body>

</html>
查看全文
相关阅读:
CppUnit
vconfig in linux
POSIX semaphore: sem_open, sem_close, sem_post, sem_wait
(Windows Command) diskpart
亮块检测及取出亮块的中心坐标
 CacheMetaData Method of Activity
(C#) Encoding.
(C#) 线程操作限制可同时访问某一资源或资源池的线程数。Semaphore 类。Mutex类
 (C# 基础) 跳转 (break, continue, goto, return, throw ).
(C#基础) 字符串数据和操作
原文地址：https://www.cnblogs.com/daysme/p/7856755.html