鼠标悬浮模糊效果

<h2>实现的效果</h1>　　<a href="https://yangrenmu.github.io/IFE-2017/nuomi/mouse-suspend/demo.html" 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;
        }
    }
}