# 全屏號碼計數器預加載器
[竹白記事本](https://chupainotebook.blogspot.com/2019/02/css-effect.html)，學習紀錄，2019/02/13。
>[Fullscreen Number Counter Preloader | Html CSS and jQuery](https://www.youtube.com/watch?v=1y4vq5_4viI)

###### tags: `jQuery` `pointer-events` `mix-blend-mode` `animation`

## CodePen
[CodePen：全屏號碼計數器預加載器](https://codepen.io/chupai/pen/aXKqrv)
<iframe height="265" style="width: 100%;" scrolling="no" title="全屏號碼計數器預加載器" src="//codepen.io/chupai/embed/aXKqrv/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/chupai/pen/aXKqrv/'>全屏號碼計數器預加載器</a> by Chupai@Design
(<a href='https://codepen.io/chupai'>@chupai</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

## pointer-events
為控制滑鼠目標的屬性。

- `auto`，預設值。
- `none`，穿透。

範例：[CodePen](https://codepen.io/CHUPAIWANG/pen/aMoxqp)
<iframe height="321" style="width: 100%;" scrolling="no" title="pointer-events" src="//codepen.io/CHUPAIWANG/embed/aMoxqp/?height=321&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/CHUPAIWANG/pen/aMoxqp/'>pointer-events</a> by CHUPAIWANG
(<a href='https://codepen.io/CHUPAIWANG'>@CHUPAIWANG</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

有加上 `pointer-events: none;` 的元素變得可以穿透，並且無法選取，類似幽靈的狀態。

## mix-blend-mode
直接在網頁呈現 Photoshop 的圖層混合糢式。
- `normal`，一般（預設值）。
- `multiply`，色彩增值。
- `screen`，濾色。
- `overlay`，覆蓋。
- `darken`，變暗。
- `lighten`，變亮
- `color-dodge`，加亮顏色（減淡）。
- `color-burn`，加深顏色。
- `hard-light`，實光。
- `soft-light`，柔光。
- `difference`，差異化。
- `exclusion`，排除。
- `hue`，色相。
- `saturation`，飽和度。
- `color`，顏色。
- `luminosity`，明度。

瀏覽器支援度：[mix-blend-mode｜Can I use](https://caniuse.com/#feat=css-mixblendmode)

## animation 屬性
>[animation｜MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation)
>[完整解析 CSS 動畫｜Oxxo Studio](https://www.oxxostudio.tw/articles/201803/css-animation.html)

CSS `animation` 屬性是如下屬性的一個簡寫屬性形式：
- `animation-name`，指定動畫名稱。
- `animation-duration`，指定動畫撥出時間。
- `animation-timing-function`，指定動畫撥放的速度。
- `animation-delay`，設定動畫延遲播放時間。
- `animation-iteration-count`，設定動畫播放次數。
- `animation-direction`，設定動畫播放方向。
- `animation-fill-mode`，設定動畫播放前後模式。
- `animation-play-state`，動畫播放或暫停狀態。

### **`animation-name`**
指定應用的一系列動畫，每個名稱代表一個由 [`@keyframes`](#keyframes) 定義的動畫序列。

### **`animation-duration`**
動畫撥出的持續時間，數值加上單位 `s` 秒或 `ms` 毫秒，如果時間為負數等同 0 秒，不會進行動畫。

### **`animation-timing-function`**
- `ease`，平滑播放（逐漸變慢）。
- `ease-in`，慢到快（加速）。
- `ease-out`，快到慢（減速）。
- `ease-in-out`，慢到快再到慢（先加速後再減速）。
- `linear`，線性播放（等速）。
- `step-start`、`step-end`，按照關鍵影格的順序一格格進行，不會有中間的演算動畫，兩者差異在於，前者看不到第一格，後者看不到最後一格。
- `cubic-bezier()`，自定義速度。

### **`animation-delay`**
設定動畫延遲播放時間，數值加上單位 `s` 秒或 `ms` 毫秒，如果時間為負數則是快轉。

### **`animation-iteration-count`**
動畫播放的次數，預設值為 1 次。
- 次數，指定播放次數。
- `infinite`，無限循環。

### **`animation-direction`**
- `normal`，正常播放，從 0% 到 100%（預設值）。
- `reverse`，反轉播放，從 100% 到 0%。
- `alternate`，正反轉輪流播放，奇數次為 0% 到 100%，偶數次為 100% 到 0%，若動畫播放次數只有一次就只會正常播放。
- `alternate-reverse`，`alternate` 的相反，奇數次為 100% 到 0%，偶數次為 0% 到 100%，若動畫播放次數只有一次就只會反轉播放。

### **`animation-fill-mode`**
動畫播放前後模式。
- `none`，預設值，不論動畫播放次數，結束後一律返回原始狀態。
- `forwards`，動畫結束後，保持在最後一個影格狀態。
- `backwards`，動畫結束後，保持在第一個影格狀態（但實際測試和 none 效果一樣）。
- `both`，依據動畫的次數或播放方向，保持在第一個影格或最後一個影格狀態，相當實用。
### **`animation-play-state`**
動畫播放或暫停狀態。
- `running`：，預設值，表示動畫運行。
- `paused`，表示動畫暫停。

## @keyframes 設定關鍵影格

@keyframes 動畫名稱 {屬性設定;}

屬性設定：
1. `from`，動畫第 1 個影格效果設定，等同 0%。
2. `to`，動畫最後 1 個格影格效果設定，等同 100%。
3. `%`，以動畫撥出時間的百分比，進行特定影格設定。

## jQuery
- [text() 方法](http://www.w3school.com.cn/jquery/manipulation_text.asp)
- [css() 方法](http://www.w3school.com.cn/jquery/jquery_css.asp)