先上效果：
兔幾?你好鴨div
>
*.words
.words::before
div:hover::before
主要說一下css部分：
這個就是我們顯示在div裡的一句話，設定div的寬高，絕對定位，文字居中，left: 50%; top: 50%;transform: translate(-50%, -50%); 是讓整個div處於頁面中心位置
下面給這個div加乙個偽類，也設定絕對定位，寬度200px，高2px，顏色分紅，處於底部bottom，變換方式是transform: scalex(0)，也就是說初始狀態是看不到的(0倍縮放)，補間動畫設定的是對transform屬性做動畫效果，時間是0.5s，這裡有個很重要的一點就是transform-origin: right，這樣設定就讓變換的頂點處於右邊
注意，hover屬性不能寫成div::before:hover,應該是div:hover::before
hover屬性設定正常大小，但是變換原點設定在左邊，意思就是hover狀態時候，從scalex(0)變到scalex(1)，怎麼變呢，從左邊開始變！
結合上面.words::before的寫法，可以得出，hover狀態一結束，立馬要從scalex(1)變到scalex(0)，怎麼變呢，最終的效果是calex(0)，原點在右邊，所以當然要往右邊收縮啦！
使用css實現動態下劃線效果
而且下劃線是與超連結同色的 大家可以自行測試 這個效果我們可以很方便的使用css偽元素來實現。主要是用到了transform 中的scale來縮放偽元素，達到拉長偽元素 下劃線 的結果。同時使用transform origin來控制縮放方向，下面的原始碼複製即可使用 dom href class s...
網頁動態下劃線
實現這個效果很簡單，我們用css的偽元素來實現，用transform的scale對偽元素進行縮放，達到動態的效果。doctype html en utf 8 動態下劃線 title text css super link super link after super link hover super...
CSS 實現炫酷的動態背景效果
活不多說，直接開始 效果圖 乙個萬能的div class bgc div 主要是css部分 使用background屬性 純色線性漸變 linear gradient 徑向漸變 radial gradient 角向漸變 conic gradient 多重線性漸變 repeating linear g...