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
#box
:hover
#content
:before

小結以前感覺好多屬性用不上，這下用上了好多個，以後繼續寫寫寫~

css實現滑鼠懸浮字型流光背景模糊效果

filter blur n px 用來將模糊，n為number型別，代表模糊程度，數字越大越模糊 background clip text background clip 用於北京的裁剪，決定背景的開始位置，當設定為text時，可將背景設定在文字上面 webkit text fill color t...

css實現滑鼠懸浮字型流光背景模糊效果

filter blur n px 用來將模糊，n為number型別，代表模糊程度，數字越大越模糊 background clip text background clip 用於北京的裁剪，決定背景的開始位置，當設定為text時，可將背景設定在文字上面 webkit text fill color t...

Selenium 實現滑鼠懸浮

actionchains基本用法 from selenium import webdriver from selenium.webdriver.common.action chains import import time driver webdriver.firefox driver.get ur...