# Text Hover Effects
[竹白記事本](https://chupainotebook.blogspot.com/2019/02/css-effect.html)，學習紀錄，2019/02/23。

>[CSS Text Hover Effects | Html CSS](https://www.youtube.com/watch?v=YnoaJ32A9VU)

###### tags: `attr()` `white-space` `transition` `transform`

## CodePen
>[Text Hover Effects](https://codepen.io/chupai/pen/daxWBY)

<iframe height="300" style="width: 100%;" scrolling="no" title="CSS Text Hover Effects" src="//codepen.io/chupai/embed/daxWBY/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/chupai/pen/daxWBY/'>CSS Text Hover Effects</a> by Chupai@Design
(<a href='https://codepen.io/chupai'>@chupai</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

## attr()
>[attr()｜MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/attr)

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

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

## white-space

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

## transition
>[transition｜MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition)

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

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

## transform
>[transform｜MDN](https://developer.mozilla.org/zh-TW/docs/Web/CSS/transform)

`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%`。