<h2>實現的效果</h1>　　<a title="demo">DEMO</a>

圖片模糊

使用css中的filter實現。

img{
    filter: blur(2px);
}

邊框兩邊散開

使用偽元素<code>::before</code>、<code>::after</code>實現，父盒子使用相對定位，偽元素使用絕對定位。實現上下邊框展開時，把偽元素的寬度設為0，高度與父盒子等高，偽元素的上下邊框設置為3px，左右邊框為0，放在父盒子中間位置。當鼠標移到圖片上時，將偽元素寬度設為100%，并把偽元素放在父盒子左邊。代碼如下：

.suspend-border::before {
    content: '';
    position:absolute;
    left: 50%;
    top: 0;
    width: 0;
    height: 100%;
    border:3px solid #fff;
    border-width:3px 0;
    visibility: hidden;
    -webkit-transition:all 1s;
    transition:all 1s;
    box-sizing:border-box;
}
.container::hover .suspend-border::before {
    width: 100%;
    visibility: visible;
    left: 0;
}

字體流光漸變效果

<code>1.background-image</code>
　　設置背景漸變的效果
<code>2.background-clip</code>
　　設置背景只填充文字部分
<code>3.color</code>
　　文字設為透明效果
<code>4.background-size</code>
　　將背景放大兩倍，移出的部分用剩下的部分補上。
<code>5.animation</code>
　　設置動畫
代碼如下：

.suspend-border {
    background-image: -moz-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%, #ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
    background-clip:text;
    color:transparent;
    background-size:200% 100%;
    animation: color-animation 3s infinite ;
    @keyframes color-animation{
        0%{
            backgroundposition:0 0;
        }
        100%{
            background-position:-100% 0;
        }
    }
}