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

原文地址：→看過來

寫在前面

有的時候感受寫點小玩意兒挺開心的，還能實踐不少的小知識點，因此此次學着寫了個有趣的鼠標懸浮模糊效果，只使用了css額。

效果圖

源碼地址→傳送門

預覽地址→傳送門

小知識點

filter: blur(npx);

這個過濾器用來將圖片模糊，可是兼容性不太好，n表明模糊度，值越大越模糊。

background-clip: text;

background-clip是用於背景圖片的裁剪，決定背景從哪裏開始顯示。當設置爲text時，便可將背景設置在字體上。

text-fill-color

這個屬性爲字體顏色填充，在這裏設置成transparent,而後在本身填充一個顏色漸變的字體顏色。

linear-gradient

線性漸變，這裏爲文字添加一個漸變色，爲了實現流光漸變的效果，須要將背景寬度設置爲200%，且linear-gradient的0%和100%顏色同樣，便於先後銜接上，具體以下：

background-image: -webkit-linear-gradient(left, red, yellow 25%, red 50%, yellow 75%, red 100%);
background-size: 200% 100%;

在設置好背景色以後爲字體添加動畫，使文字產生流光效果。

鼠標懸浮顯示和隱藏
現將元素的透明度設爲0，當鼠標懸浮時執行漸變透明度變爲1。

邊框向兩邊伸展的效果

在實際中咱們只能設置邊框的寬度，而不能改變邊框的長度，因此此處不能直接用border的屬性。而是經過追加2個元素，並改變其大小來實現本元素的邊框向兩邊伸展的效果。分別設置這兩個元素的上下邊框及左右邊框。
原理圖(實現爲所設邊框，虛線爲不設置邊寬)：

追加元素的實現
追加元素寬或高爲0，當鼠標移動到box上時，寬或高漸變到100%，便可。

#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;
        }

左和右邊框同理實現。

小結

之前感受好多屬性用不上，這下用上了好多個，之後繼續寫寫寫~