CSS動畫 有活力的鏈結下劃線

2021-09-19 07:51:42 字數 543 閱讀 5768

鏈結下劃線是非常常見的一種樣式,最近做了乙個非常簡單的視覺效果,非常不錯,可以點下面鏈結檢視。

建立這種效果是非常簡單的,不需要新增額外的dom元素到html,不過需要考慮一下瀏覽器的相容性問題,在老舊版本的瀏覽器中它只會顯示為乙個普通的下劃線。

h2 > a 

h2 > a:hover

接下來,我們要新增border,通過變換隱藏它。插入乙個:before並且設定它scalex(0),保守起見,如果瀏覽器不支援,我們通過visibility: hidden隱藏它。

h2 > a:before
最後設定動畫時間為0.3s,現在我們只需要設定元素在hover時顯示並且scalex(1)

h2 > a:hover:before
大功告成!??????

這樣就完成了乙個很有活力的下劃線動畫

CSS3繪製有活力的鏈結下劃線

鏈結下劃線是非常常見的一種樣式,最近做了乙個非常簡單的視覺效果,非常不錯,完整 檢視。xml html code複製內容到剪貼簿 程式設計客棧 建立這種效果是非常簡單的,不需要新增額外的dom元素到html,不過需要考慮一下瀏覽器的相容性問題,在老舊版本的瀏覽器中它只會顯示為乙個普通的下劃線。好了,...

去超連結下劃線專題詳解

去掉超連結的下劃線,需要用樣式表css來控制。找到這兩句了嗎?樣式表語句就加在它們中間。如下 僅僅加入這一句就去掉超連結下劃線了,這是個最簡單的例子,你試著這樣做就會成功的。二 上面的例子只是告訴你如何一次性去掉超連結下劃線,如果你的網頁當中有的超連結需要下劃線,有的不需要,該怎麼辦呢?首先你要構思...

利用CSS自定義網頁超連結下劃線樣式

巧妙利用css自定義網頁下劃線樣式 實現方法很簡單,在源 的和之間加上如下的css語法控制 text decoration none background url underline.gif repeat x 100 100 padding bottom 4px white space nowrap...