刚刚翻了下大漠的那本书看到那个 CSS3 的 target 属性我也是醉了，用的活这个可以用到很多地方。你想了解更多 CSS3 的技巧还是去看看大漠的那本书吧，才 9.9人民币。真想不到那些写书的大神怎么想的，辛辛苦几年写的书，几块钱就答应卖出去，想想就醉了...

主要用到的知识点: CSS3里的 target 选择器。其余的自行发挥...

直接上代码结构了:

HTML:

<section>
 <a href="#alert" class="button">
 <img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/b6/doge_org.gif"  /></a>
</section>
<div class="box-target" id="alert">
 <img src="http://tp3.sinaimg.cn/2175915602/180/5705233498/1">
 <a class="box-close" href="#"></a>
</div>

SCSS:

/**
By Go7hic
jsfiddle 上面的 sass 不带 Compass 也是醉了，所以几个css3属性的混合宏不能直接调用，还是直接用css写出来吧。
**/
body {
  background: #333;
  font-size: 1em;
  color: #f0f0f0;
  line-height: 1.1em;
}
a {
  text-decoration: none;
  color: #313131;
  &:hover {
    color: #000;
  }
}
section {
  width: 500px;
  margin: 0 auto;
  background: #555;
  padding: 1em;
}

a.button {
    display: inline-block;
    background: #999;
    color: #f2f2f2;
    border-radius: 50%; /* 直接写啦,后面的也是 */
    padding: 10px 1em;
    box-shadow: 0 3px 0 #777; 
    font-size: 1.3em;
    text-decoration: none;
}

.box-target {
    position: fixed;
    top: -100%;
    width: 100%;
    background: rgba(0,0,0,.7);
    opacity: 0;
    transition: opacity .5s ease-in-out;
    overflow: hidden;
     img {
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 0%;
        max-width: 0%;
        border: 3px solid #fff;
        box-shadow: 0 0 8px rgba(0,0,0,.3);
        box-sizing: border-box;
        transition: .5s ease-in-out;
     }
    &:target {
        opacity: 1;
        top: 0;
        bottom: 0;
        img {
            max-height: 100%;
            max-width: 100%;
        }
        .box-close {
            top: 5%;
        }
    }
}

.box-close {
    display: block;
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    background: #139dd7;
    color: #fff;
    position: absolute;
    top: 10%;
    right: 5%;
    transition: .5s ease-in-out;
    &:before, &:after {
        content: " ";
        display: block;
        height: 30px;
        width: 1px;
        background: #fff;
        position: absolute;
        left: 26px;
        top: 10px;
        transform: rotate(45deg);
    }
    &:after {
        transform: rotate(-45deg);
    }
}

可爱的 DEMO: 点我点我

这个应用场景应该有很多地方，如果你的团队无视 IE 浏览器，推行 HTML5 和 CSS3，那么可以试试这个方法。

扫码关注w3ctech微信公众号