css實現鼠標懸浮字體流光背景模糊效果

原文地址: ----> 看過來

有興趣的朋友能夠直接點原文地址看效果，在這裏我只寫下做者實現效果所用到的知識點。

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%，便可。 

 

左和右邊框同理實現。