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);