有趣的鼠标悬浮模糊效果总结---（filter，渐变文字）

Posted 2020-09-04 123默小白

绘制渐变背景图

第一种：大神的想法，摘抄

background-image: -webkit-linear-gradient(left, blue, red 25%, blue 50%, red 75%, blue 100%);
使用CSS3的渐变绘制图像，从左到右。
需要注意的是颜色是 0到49%的颜色组 = 50%到99%的颜色组，且最后100%的颜色要和开头0的颜色相等
这是为了能无缝衔接流光效果, 之后有说到

裁剪背景图

-webkit-background-clip: text;
使用文字作为裁剪区域向外裁剪，此时文字颜色仍覆盖背景图

设置字体颜色

-webkit-text-fill-color: transparent; or color: transparent;
将字体颜色设置成透明，这样就能将背景图显示出来了

设置背景图长度

background-size: 200% 100%;
将背景图宽度拉长至两倍，之前设置background-image的两份相同的颜色组，就是为了能在此拉长后只显示一份颜色组，另外超出的半截颜色组用来实现流光效果

开始动画

animation: streamer 5s infinite linear;

@keyframes streamer {
    0%  {
        background-position: 0 0;
    }
    100% {
        background-position: -100% 0;
    }
}

 

第二种实现方式：（比较笨，是自己想的）

.span{
    position:absolute;
    top:33%;
    left:15%;
    display:inline-block;
    font-size:33px;
    font-family: ‘Microsoft YaHei‘;
    animation:span 3s linear infinite;
    -webkit-animation:span 3s linear infinite;
    -moz-animation:span 3s linear infinite;
    background-image: -webkit-gradient(linear, left top,right top, from(blue), color-stop(0.25, green), color-stop(0.5, red), color-stop(0.75, pink), to(blue));
    background-image: -moz-gradient(linear, left , blue, green, red, pink, blue);
    -webkit-background-clip: text;//用文字对背景进行裁剪
    -webkit-text-fill-color: transparent;//文字颜色为透明，就可以用背景色代替文字颜色
   }
@keyframes span{
    0%{
        background-image: -webkit-gradient(linear, left top,right top, from(red),color-stop(0.5, blue), to(green));
        background-image: -moz-gradient(linear, left , blue, green, red, pink, blue);

    }
    50%{
        background-image: -webkit-gradient(linear, left top,right top, from(green),color-stop(0.5, red), to(blue));
        background-image: -moz-gradient(linear, left , blue, green, red, pink, blue);
    }
       100%{
        background-image: -webkit-gradient(linear, left top,right top, from(blue),color-stop(0.5, green), to(red));
           background-image: -moz-gradient(linear, left , blue, green, red, pink, blue);
    }
}

使用伪元素的方法实现边框从四周散开或者聚拢

.bigDiv::after{
    content:‘‘;
    width:5%;
    height:100%;
    position:absolute;
    left:50%;
    top:0;
    border-top:4px solid white;
    border-bottom:4px solid white;
    -webkit-transition:all 1s linear ;
    -moz-transition:all 1s linear ;
    -ms-transition:all 1s linear ;
    -o-transition:all 1s linear ;
    transition:all 1s linear;
    height:100%;
}
.container:hover .bigDiv::after{
    width:49%;
    -webkit-transition:all 1s linear ;
    -moz-transition:all 1s linear ;
    -ms-transition:all 1s linear ;
    -o-transition:all 1s linear ;
    transition:all 1s linear;
}
.bigDiv::before{
    content:‘‘;
    width:3%;
    height:100%;
    position:absolute;
    left:50%;
    top:0;
    border-top:4px solid white;
    border-bottom:4px solid white;
    -webkit-transition:all 1s linear ;
    -moz-transition:all 1s linear ;
    -ms-transition:all 1s linear ;
    -o-transition:all 1s linear ;
    transition:all 1s linear;
}
.container:hover .bigDiv::before{
    width:50%;
    left:0%;
    -webkit-transition:all 1s linear ;
    -moz-transition:all 1s linear ;
    -ms-transition:all 1s linear ;
    -o-transition:all 1s linear ;
    transition:all 1s linear;
}

以上是上下边框效果的实现；

下面是如何实现左右边框实现效果

<div class="container">
<div class="context"></div>
<div class="bigDiv" >
<i class="border_left"></i>
<span class="span">
Welcome momoxiaobai
</span>
<a class="span1" href="#">
Click here
</a>
</div>
</div>

</div>

创建一个元素，设置此元素的伪元素的位置，设计相应的效果：

.border_left::before{
    content:‘‘;
    width:521px;
    height:0px;
    position:absolute;
    left:0%;
    top:50%;
    border-left:2px solid white;
    border-right:2px solid white;
    -webkit-transition:all 1s linear ;
    -moz-transition:all 1s linear ;
    -ms-transition:all 1s linear ;
    -o-transition:all 1s linear ;
    transition:all 1s linear;
}
.container:hover .border_left::before{
    height:168.5px;
    -webkit-transition:all 1s linear ;
    -moz-transition:all 1s linear ;
    -ms-transition:all 1s linear ;
    -o-transition:all 1s linear ;
    transition:all 1s linear;
}
.border_left::after{
    content:‘‘;
    width:521px;
    height:0px;
    position:absolute;
    left:0%;
    top:50%;
    border-left:2px solid white;
    border-right:2px solid white;
    -webkit-transition:all 1s linear ;
    -moz-transition:all 1s linear ;
    -ms-transition:all 1s linear ;
    -o-transition:all 1s linear ;
    transition:all 1s linear;
}
.container:hover .border_left::after{
    height:168.5px;
    top:0%;
    -webkit-transition:all 1s linear ;
    -moz-transition:all 1s linear ;
    -ms-transition:all 1s linear ;
    -o-transition:all 1s linear ;
    transition:all 1s linear;
}