網頁動態下劃線

2021-09-29 17:15:42 字數 925 閱讀 8649

實現這個效果很簡單,我們用css的偽元素來實現,用transform的scale對偽元素進行縮放,達到動態的效果。

<

!doctype html>

"en"

>

"utf-8"

>

動態下劃線<

/title>

"text/css"

>

.super

-link

.super

-link:

:after

.super

-link:hover

.super

-link:hover:

:after

.left:

:after

.cent:

:after

.right:

:after

.color:

:after

<

/style>

<

/head>

"#"class

="super-link left"

>動態效果左向右伸展<

/a>

"#"class

="super-link center"

>動態效果中間向兩邊伸展<

/a>

"#"class

="super-link right"

>動態效果右向左伸展<

/a>

"#"class

="super-link color"

>自定義顏色<

/a>

<

/body>

<

/html>

由於本人剛接觸前端,有不足的地方請多多指教。

Python單下劃線和雙下劃線

python 用下劃線作為變數字首和字尾指定特殊變數。不能用 from moduleimport 匯入 系統定義名字 類中的私有變數名 核心風格 避免用下劃線作為變數名的開始。因為下劃線對直譯器有特殊的意義,而且是內建識別符號所使用的符號,我們建議程式設計師避免用下 劃線作為變數名的開始。一般來講,...

美化下劃線

在css中,眾所周知使用text decoration underline 可以為任何文字新增下劃線的效果。不過我們一般都在初始化裡把a標籤的下劃線去掉 text decoration none 有沒有想過美化這些下滑下劃線呢 理想的場景中,強調使用下劃線,它應該做到以下幾點 這些要求並不為過,都是...

下劃線滑動

下劃線滑動,最後乙個li空著,留著後面有用,通過絕對定位,把最後乙個 li.quebec 定位到導航下方,設定寬度高度。設定 transition,當我們改變 left,width的時候就能實現動畫。css 樣式 ul li li a selected a最後乙個li空著,留著後面有用。css樣式就...