css3 动画
动画：渐变、2D、3D、过渡、动画
例子：
/* 从上到下渐变*/
#div1{
100px;
height: 100px;
background: linear-gradient(red, blue);
}
/* 从左到右渐变*/
#div2{
100px;
height: 100px;
background: linear-gradient(to right,blue, red);
}
/* 左上角到右下角渐变*/
#div3{
100px;
height: 100px;
background: linear-gradient(to bottom right,blue, red);
}
/* 多角度渐变*/
#div4{
100px;
height: 100px;
background: linear-gradient(200deg,blue, red);
}
/*translate() 方法 移动*/
#div5{
50px;
height: 100px;
border:1px solid black;
background:#0AFF00;
transition:transform 2s;/* 过渡*/
}
#div5:hover{
transform: translate(100px,100px);
}
/*rotate() 方法 旋转*/
#div6{
50px;
height: 100px;
border:1px solid black;
background:#0AFF00;
}
#div6:hover{
transform: rotate(30deg);
}
/*scale() 方法 缩放*/
#div7{
50px;
height: 100px;
border:1px solid black;
background:#0AFF00;
}
#div7:hover{
transform: scale(2,3);
}
/*
rotateX() 方法 绕X轴旋转
rotateY() 方法 绕Y轴旋转
*/
#div8{
10px;
height: 100px;
background:#0AFF00;
}
#div8:hover{
transform: rotateX(120deg);
/* transform: rotateY(120deg);*/
}
/*多项改变 */
#div8{
10px;
height: 100px;
background:#0AFF00;
transition:width 5s,height 5s, transform 5s;
/* 要添加多个样式的变换效果，添加的属性由逗号分隔：*/
}
#div8:hover{
150px;
height: 500px;
transform: rotateY(120deg);
}