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

2022-02-08 21:04:45 字數 939 閱讀 1396

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 

#box:hover #content:before

追加元素的實現

追加元素寬或高為0,當滑鼠移動到box上時,寬或高漸變到100%,即可。 

左和右邊框同理實現。

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

寫在前面 有的時候感覺寫點小玩意兒挺開心的,還能實踐很多的小知識點,所以這次學著寫了個有趣的滑鼠懸浮模糊效果,只使用了css額。效果圖 原始碼位址 傳送門 預覽位址 傳送門 小知識點 filter blur npx 這個過濾器用來將模糊,但是相容性不太好,n代表模糊度,值越大越模糊。backgrou...

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...