css实现鼠标悬浮字体流光背景模糊效果

原文链接： https://www.mk2048.com/blog/blog.php?id=h0b0abj1c12j&title=css%E5%AE%9E%E7%8E%B0%E9%BC%A0%E6%A0%87%E6%82%AC%E6%B5%AE%E5%AD%97%E4%BD%93%E6%B5%81%E5%85%89%E8%83%8C%E6%99%AF%E6%A8%A1%E7%B3%8A%E6%95%88%E6%9E%9C

原文地址: ----> 看过来

有兴趣的朋友可以直接点原文地址看效果，在这里我只写下作者实现效果所用到的知识点。

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

css实现鼠标悬浮字体流光背景模糊效果

猜你喜欢