Text Hover Effects

竹白記事本，學習紀錄，2019/02/23。

CSS Text Hover Effects | Html CSS

tags: attr() white-space transition transform

CodePen

Text Hover Effects

attr()

attr()｜MDN

CSS 表達式 attr() 用來獲取選擇到的元素的某一 HTML 屬性值，並用於其樣式。它也可以用於偽元素，屬性值採用偽元素所依附的元素。

attr() 表達式可以用於任何 CSS 屬性

white-space

• normal，默認。空白會被瀏覽器忽略。
• npre，空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標簽。
• nnowrap，文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標簽為止。
• npre-wrap，保留空白符序列，但是正常地進行換行。
• npre-line，合並空白符序列，但是保留換行符。
• ninherit，規定應該從父元素繼承 white-space 屬性的值。

transition

transition｜MDN

定義元件在兩個狀態之間切換的轉場效果。

• transition-property，指定進行變換的屬性（預設 all）。
• transition-duration，指定屬性值變換的時間（預設 0s）。
• transition-timing-function，指定屬性變換的速度（預設 ease）。
• transition-delay，指定變換效果的延遲時間（預設 0s）。

transform

transform｜MDN

transform CSS 屬性可以讓你修改 CSS 可視化格式糢型（visual formatting model）的空間維度。使用此屬性，元素可以被平移、旋轉、縮放和傾斜。

• translate(x,y)，元素水平、垂直移動。
• translateX(x)，元素水平移動。
• translateY(y)，元素垂直移動。
• scale(x,y)，元素縮放。
• scaleX(x)，元素水平方向縮放。
• scaleY(y)，元素垂直方向縮放。
• rotate(angle)，元素旋轉的角度。
• skew(x-angle,y-angle)，元素傾斜設定。
• skewX(angle)，元素水平傾斜設定。
• skewY(angle)，元素垂直傾斜設定。
• matrix(n,n,n,n,n,n)，以含有 6 個參數值的變化定元素的變形效果。
• none，不進行任何變換。

transform-origin

transform-origin 屬性為複合屬性值，其屬性包含水平（X 軸），與垂直（Y軸），方向的變量參數，變量參數間以空白隔開。如果只給一個數值，則變更水平（X 軸），垂直（Y軸）不變。

可用屬性值：

• 長度，數值 + 單位
• %（百分比），以元素預設中間的點的基準為百分比值。
• left，靠左，水平方向位置的選項，等同 0%。
• right，靠右，水平方向位置的選項，等同 100%。
• top，靠上，垂直方向位置的選項，等同 0%。
• bottom，靠下，垂直方向位置的選項，等同 100%。
• center，置中， 水平、垂直方向位置的選項，等同 50%。