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

>[Pure CSS Quote Box Hover Effects | Html CSS](https://www.youtube.com/watch?v=aK7RQEY30lo)

###### tags: `transition` `CSS-Selector`

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

## 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）的空間維度。使用此屬性，元素可以被平移、旋轉、縮放和傾斜。

## CSS Selector
>[CSS 選擇器參考手冊](http://www.w3school.com.cn/cssref/css_selectors.ASP)