animation 動畫
/* keyframes 定義動畫 */
@keyframes myname<動畫名稱>{
0%{opacity:0;}
50%{opacity:.8;}
100%{opacity:0;}
}
/* animation 調(diào)用動畫 */
mydiv {
animation:myname 2s ease 1s infinite<循環(huán)> reverse<反向> both>;
動畫名稱 + 持續(xù)時間 + 運動曲線 + 延遲時間 + 播放次數(shù) + 是否反向 + 動畫起始或終止?fàn)顟B(tài)
}
/* animation 動畫暫停與啟動 */
mydiv:hover{
animation-play-state:paused; //暫停
animation-play-state:running; //啟動
}transform 變形工具
詳情點擊：transform 變形工具屬性介紹及應(yīng)用
文字
文字間距 letter-spacing: 2px; 強制為大寫字母 text-transform: uppercase; 強制為小寫字母 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，可實現(xiàn)圖片垂直居中； 再結(jié)合margin: auto實現(xiàn)圖片上下左右中心居中效果。
屏蔽層上鼠標(biāo)事件
關(guān)閉層上鼠標(biāo)事件 pointer-events: none; 開啟層上鼠標(biāo)事件 pointer-events: auto;
強制恢復(fù)默認(rèn)樣式：inherit
font-size: inherit; padding: inherit; ... ...
鼠標(biāo)手型
cursor: pointer;
設(shè)置前綴和后綴
自動添加前綴
div:before{content:"?";}
自動添加后綴
div:after{content:"?";}水平+垂直居中解決方案
居中元素設(shè)置絕對定位：position:absolute
.child {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
居中元素設(shè)置相對定位：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() 顏色漸變（模擬圖片）
/* 從上到下，藍色漸變到紅色 */ 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);
