首页 > 代码库 > 有趣的鼠标悬浮模糊效果总结---(filter,渐变文字)
有趣的鼠标悬浮模糊效果总结---(filter,渐变文字)
绘制渐变背景图
第一种:大神的想法,摘抄
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="http://www.mamicode.com/#">
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; }
有趣的鼠标悬浮模糊效果总结---(filter,渐变文字)