animation 動畫

/* keyframes 定義動畫 */
@keyframes myname<動畫名稱>{
    0%{opacity:0;}
    50%{opacity:.8;}
    100%{opacity:0;}
}

/* animation 調用動畫 */
mydiv {
animation:myname 2s ease 1s infinite<循環> reverse<反向> both>;
動畫名稱 + 持續時間 + 運動曲線 + 延遲時間 + 播放次數 + 是否反向 + 動畫起始或終止狀態
}

/* animation 動畫暫停與啟動 */
mydiv:hover{
    animation-play-state:paused;  //暫停
    animation-play-state:running;  //啟動
}

詳細的animation 動畫介紹請點擊！

transform 變形工具

詳情點擊：transform 變形工具屬性介紹及應用

文字

文字間距
letter-spacing: 2px;

強制為大寫字母
text-transform: uppercase;
強制為小寫字母
text-transform: lowercase;

不允許換行
white-space: nowrap;

=== 文字豎向排列 ===
默認：水平方向，從上到下
writing-mode:horizontal-tb;
垂直方向，從右向左
writing-mode:vertical-rl;
垂直方向，從左向右
writing-mode:vertical-lr;

小技巧：圖片結合writing-mode垂直方向，加上text-align:center，可實現圖片垂直居中；
再結合margin: auto實現圖片上下左右中心居中效果。

屏蔽層上鼠標事件

關閉層上鼠標事件
pointer-events: none;

開啟層上鼠標事件
pointer-events: auto;

強制恢復默認樣式：inherit

font-size:  inherit;
padding:  inherit;
... ...

鼠標手型

cursor: pointer;

設置前綴和后綴

自動添加前綴
div:before{content:"?";}

自動添加后綴
div:after{content:"?";}

水平+垂直居中解決方案

居中元素設置絕對定位：position:absolute
.child {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}

居中元素設置相對定位：position:relative;
.child {position:relative;margin-left:50%;margin-top:50%;transform:translate(-50%,-50%);}

小提示：前面-50%是水平方向，后面-50%是垂直方向
transform:translate(-50%,-50%)

水平鏡像翻轉、垂直鏡像翻轉

水平鏡像翻轉
.div {transform:rotateY(180deg);}  

垂直鏡像翻轉
.div {transform:rotateX(180deg);}

linear-gradient() 顏色漸變（模擬圖片）

/* 從上到下，藍色漸變到紅色 */
linear-gradient(blue, red)
 
/* 漸變軸為45度，從藍色漸變到紅色 */
linear-gradient(45deg, blue, red)
 
/* 從右下到左上、從藍色漸變到紅色 */
linear-gradient(to left top, blue, red)
 
/* 從左到右，透明到黑，再到透明漸變，中間黑色部分為90%-10%=80% */
linear-gradient(to right, transparent, black 10%, black 90%, transparent)

/* linear-gradient()模擬的是圖片，所以background-color屬性下無效，只能用background或background-image */
background-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);