css

切割 clip-pth

text-transform

text-transform: none; 默认定义带有小写字母和大写字母的标准文本
text-transform: capitalize; 文本中的每个单词以大写字母开头
text-transform: lowercase; 定义无大写字母，仅有小写字母
text-transform: uppercase; 定义无小写字母，仅有大写字母
text-transform: inherit; 从父元素继承text-transform的值

letter-spacing

letter-spacing 属性增加或减少字符间的空白（字符间距）

元素居中

文本样式居中||inline-block

父级元素上添加 text-align: center;

块级元素居中最重要的代码

<div class="big-main">
   <div class="smart-main"></div>
</div

.big-main{
 width:200px;
 height:200px;
 position:relative;
}
.smart-div{
 width:50px;
 height:50px;
 positiong:absolute
 /*居中代码*/
 top:50%;
 left:50%;
 margin-left: -25px; 
 margin-top: -25px;
}
/*
居中公式，大div的50%-小div的50%（长/宽）

so
transform:translate(-50%,-50%) 就是
margin-left: -25px; 
margin-top: -25px;
*/

transform:translate()方法坐标详解

transform.translate(x,y),给定x,y的值，从而使当前元素位置的移动

1.transform.translate(0,0)

2.transform.translate(10px,10px)

3.transform.translate(-50%,-50%)

@keyframes

@keyframes 定义一个动画，并定义具体的动画效果，比如放大还是位移
@keyframes 定义的动画并不直接执行，需要借助animation来运转

语法： @keyframes animationname {keyframes-selector {css-styles}};

 @keyframes moveInLeft{
   0% {
     opacity: 0;
     transform: translateX(-100px);
   }
   80%{
     transform: translateX(10px);
   }
   100%{
     transform: translate(0);
   }
 }

animation-timing-function

速度曲线
语法：animation-timing-function: value
value:
linear 动画从头到尾的速度是相同的
ease 默认，动画以低俗开始，然后加快，在结束前变慢
ease-in 以低速开始
ease-out 以低速结束
ease-in-out 以低速开始和结束
steps(int,start|end) 指定了时间函数中的间隔数量（步长）。有两个参数，第一个参数指定函数的间隔数，该参数是一个正整数（大于 0）。 第二个参数是可选的，表示动画是从时间段的开头连续还是末尾连续。含义分别如下：

• start：表示直接开始。
• end：默认值，表示戛然而止。

解决动画效果上下晃动问题

backface-visibility:hidden
backface-visibility: visible 背面可见 | hidden 背面不可见

简单动画效果

transition: property duration timing-function delay;
/*
property:指定css属性的name，transition效果
duration:指定时间 完成效果
transition-timing-function: 指定效果的转速曲线
detay: 效果开始的时候
注意：使用指定transition-duration属性，否则持续时间为0，不会有任何效果
*/

transition: all .2s;

box-shadow 阴影

box-shadow: h-shadow v-shadow blur spread color inset
/*
h-shadow:必需的，水平方向的阴影 x轴
v-shadow:必需的，垂直方向的阴影 y轴
blur: 可选，模糊距离
spread: 可选，阴影的大小
color：可选，颜色
inset：可选，从外层的阴影（开始时）改变阴影内侧阴影 
*/

box-shadow: 0 10px 20px rgba(0,0,0,.2);