2.10-css渐变、过渡、2d、3d

线性渐变--CSS3线性渐变中的角度渐变，角度渐变是水平线和渐变线之间的角度，以圆心为起点进行发散

盒子的background-image属性可以用linear-gradient()形式创建线性渐变背景

径向渐变

radial-gradient()形式创建径向渐变背景

过渡

transition过渡

1、所有数值类型的属性都可以参与过渡，比如width、height、left、top、border-radius

2、背景颜色和文字都可以被过渡

3、所有变形（包括2D和3D）都能被过渡

 动画的定义

 

 

 

 

transform: translate(x, y);是平移，第一个参数为x轴，第二个参数为y轴。

本题代码中，元素平移的坐标依次为（0,0）、（100,0）、（100,100）、（0,100）、（0,0），即从左上角移动到右上角，从右上角移动到右下角，从右下角移动到左下角，从左下角又回到了左上角。所以是元素围绕边长为100px的正方形顺时针移动一圈

animation-iteration-count: infinite | <number>;

<number>为数字，其默认值为“1”；infinite为无限次数循环。

animation-direction: normal | reverse | alternate | alternate-reverse;

normal：正常方向；

reverse：反方向运行；

alternate：动画先正常运行再反方向运行，并持续交替运行；

alternate-reverse：动画先反运行再正方向运行，并持续交替运行。