原文地址: ----> 看过来
有兴趣的朋友可以直接点原文地址看效果,在这里我只写下作者实现效果所用到的知识点。
filter: blur(n px);
//用来将图片模糊,n为Number类型,代表模糊程度,数字越大越模糊
background-clip: text;
//background-clip 用于北京图片的裁剪,决定背景的开始位置,当设置为text时,可将背景设置在文字上面
-webkit-text-fill-color: transparent;
//设置字体颜色为填充,在这里设置成transparent,然后在自己填充一个颜色渐变的字体颜色。
background-image: -webkit-linear-gradient(left, red, yellow 25%, red 50%, yellow 75%, red 100%);
background-size: 200% 100%;
//线性渐变,这里为文字添加一个渐变色,为了实现流光渐变的效果,需要将背景宽度设置为200%,且linear-gradient的0%和100%颜色一样,便于前后衔接上
animation: change 5s infinite linear;
//在设置好背景色之后为字体添加动画,使文字产生流光效果。
边框向两边伸展的效果
在实际中我们只能设置边框的宽度,而不能改变边框的长度,所以此处不能直接用border的属性。而是通过追加2个元素,并改变其大小来实现本元素的边框向两边伸展的效果。分别设置这两个元素的上下边框及左右边框。
#content:before {
content: " ";
position: absolute;
left: 50%;
top: 0;
width: 0;
height: 100%;
border: 3px solid #fff;
border-left: none;
border-right: none;
transition: all 0.8s;
box-sizing: border-box;
}
#box:hover #content:before {
width: 100%;
left: 0;
}
追加元素的实现
追加元素宽或高为0,当鼠标移动到box上时,宽或高渐变到100%,即可。
左和右边框同理实现。
更多专业前端知识,请上 【猿2048】www.mk2048.com