css3常用动画属性总结

1、text-stroke（仅支持Safari、Chrome）

-webkit-text-stroke: 1px pink;

第一个参数是描边的宽度，第二个参数是描边的颜色;通常使用这个属性，会和color:transparent;搭配使用，实现镂空字体的效果，如下示例所示

  font-size: 40px;
  -webkit-text-stroke: 1px pink;
  color:transparent;

在这里插入图片描述

2、border-radius

border-radius:value;四个角
border-radius:value value；左上右下右上左下
border-radius:value value value value；左上右上右下左下

3、 box-shadow、text-shadow

text-shadow：水平偏移垂直偏移模糊程度阴影颜色
也可以多个阴影叠加 text-shadow: 3px 4px 5px red,3px 4px 5px orange;
box-shadow：阴影1，阴影2；
box-shadow：水平偏移垂直偏移模糊程度外颜值阴影颜色（内置阴影）

4、线向渐变

background: linear-gradient(方向，色值1，色值2，...)
例1：background: linear-gradient(to left,orange,red);
例2：background: linear-gradient(to left bottom,orange,red);

4、transform 2D变换

transform包含了translate()，scale()，roate()
（1）translate可以实现从当前位置移动

transform:translate(x轴，y轴)
例1：transform: translate(20px,30px);

（2）scale可以实现元素的放大缩小

transform:scale(水平，垂直)
例1：transform: scale(0.5，1);//缩小
例1：transform: scale(1.5，1);//放大

（3）roate可以实现元素的旋转

transform:roate(角度)
例1：transform: roate(40deg);

4、transform 3D属性

3D常用属性包含translate3d(x,y,z)，translateX(x)，translateY(y)，translateZ(z)，scale3d(x,y,z)，scaleX(x)，scaleY(y)，scaleZ(z)，rotate3d(x,y,z,angle)，rotateX(angle)，rotateY(angle)，rotateZ(angle)，perspective(n透视)