<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;
}
}
}
