04-web前端-css-线性渐变/animation

渐变

• 线性渐变：linear-gradient 从一个方向到另一个方向 ，渐变属于背景图的一种
• 重复渐变：repeating-linear-gradient
• 径向渐变：radial-gradient
  • circle 圆
  • ellipse
  • closest-side 最近边
  • fartherst-side 最远边
  • closest-corner 最近角
  • fatherst-corner 最远角

过渡

• trsnsition-property 写在参与过度的属性上
• transition-duration 参与过的的时间
• transition-delay 延迟时间
• transition-timing-function 过渡动画类型
  • linear 匀速
  • ease 逐渐慢下来
  • ease-in 加速
  • ease-out 减速
  • ease-in-out 先加速后减速

transform 2D

位移

• translateX(100px )
• translateY( 200px)
• translate( 100px , 200px)

缩放

• scaleX( );
• scaleY( );
• scale( );

倾斜

• skewX( 45deg);
• skewY(45deg);
• skew( );

旋转

• rotateX( );
• rotateY( );
• rotate( );

3D

视距(景深)

• perspective( ); 近大远小

transform-oringin: top left ;原点位置

呈现一个3d空间：transform-style:preserve-3d;
３Ｄ位移
translateZ( ); translateX( ); translateY( ); translate3D( );
３Ｄ旋转
rotateX( ); rotateY( ); rotateZ( ); rotate3d( );

动画

@keyframes  name{
	from{
	
	}
	to{
	
	}
}
@keyframes name{
10%{}
20%{}
50%{}
100%{}
}

• animation-name:name; 动画名称
• animation-duration:1s; 动画时间
• animation-delay:1s; 动画延迟时间
• animation-timing-function:linear; 动画过渡类型
• animation-iteration-cont:5; 动画循环次数 infinite无限
• animation-direction:reverse; 动画是否反向运动
• animation-play-state: paused; 鼠标移上去暂停