animation 動(dòng)畫

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

/* animation 調(diào)用動(dòng)畫 */
mydiv {
animation:myname 2s ease 1s infinite<循環(huán)> reverse<反向> both>;
動(dòng)畫名稱 + 持續(xù)時(shí)間 + 運(yùn)動(dòng)曲線 + 延遲時(shí)間 + 播放次數(shù) + 是否反向 + 動(dòng)畫起始或終止?fàn)顟B(tài)
}

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

詳細(xì)的animation 動(dòng)畫介紹請(qǐng)點(diǎn)擊！

transform 變形工具

詳情點(diǎn)擊：transform 變形工具屬性介紹及應(yīng)用

文字

文字間距
letter-spacing: 2px;

強(qiáng)制為大寫字母
text-transform: uppercase;
強(qiáng)制為小寫字母
text-transform: lowercase;

不允許換行
white-space: nowrap;

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

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

屏蔽層上鼠標(biāo)事件

關(guān)閉層上鼠標(biāo)事件
pointer-events: none;

開(kāi)啟層上鼠標(biāo)事件
pointer-events: auto;

強(qiáng)制恢復(fù)默認(rèn)樣式：inherit

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

鼠標(biāo)手型

cursor: pointer;

設(shè)置前綴和后綴

自動(dòng)添加前綴
div:before{content:"?";}

自動(dòng)添加后綴
div:after{content:"?";}

水平+垂直居中解決方案

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

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

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

水平鏡像翻轉(zhuǎn)、垂直鏡像翻轉(zhuǎn)

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

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

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

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

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