css3相关知识

一、transition–过渡

• transition语法

transition: property duration timing-function delay;

• transition的相关属性

transition-property: 指定想要进行过渡的属性
 	transition-property: none||all||property
 		none:没有属性过渡
 		all: 所有属性进行过渡(默认)
 		property: 指定进行过渡的CSS属性
 	
transition-duration: 指定过渡过程完成的时间
	transition-duration: 0||*s||*ms
	
transition-timing-function: 指定过渡过程的变化曲线
	transition-timing-function: linear||ease||ease-in||ease-out||ease-in-out||cubic-bezier(n,n,n,n)
		linear: 线性过渡，匀速
		ease: 慢-快-慢
		ease-in: 慢速开始
		ease-out: 慢速结束
		ease-in-out: 慢速开始慢速结束
		cubic-bezier(n,n,n,n): 自定义贝塞尔曲线函数
		
transition-delay: 指定过渡效果等待开始执行的时间
	transition-delay: 0||*s||*ms

二、transform–转换

• transform语法

transform: none||transform-functions;
	none:默认值
	transform-functions: 转换函数

transform转换函数

• translate–平移
  translateX(x)
  translateY(y)
  translateZ(z)
  translate3d(x,y,z)
• rotate–翻转
  rotateX(deg)
  rotateY(deg)
  rotateZ(deg)
  rotate(x,y,z,deg)
• skew–斜切
  skew(x-deg,y-deg)
  skewX(deg)
  skewY(deg)
• scale–缩放
  scale(x[,y]?) //—填一个值默认缩放XY
  scaleX(x)
  scaleY(y)
• matrix–矩阵
  参照https://blog.csdn.net/weixin_42103959/article/details/81044389
• perspective–为3D转换元素定义透视视图
• transform-origin旋转圆点

	transform-origin: x-axis y-axis z-axis;
	// x-axis: left || right || center || length || %
	// y-axis: top || bottom || center || length || %
	// z-axis: length

• transform–style属性指定嵌套元素是怎样在三维空间中呈现

transform-style: flat|preserve-3d;

三、animation函数

• animation语法

animation: name duration tming-function delay iteration-count direction fill-mode play-state;

• name 指定要绑定到选择器的关键帧名称

// 开始-结束
@keyframes animation-name {
	from {} // 开始
	to {} // 结束
}

// 分不同阶段进行
@keyframes animation-name {
	0% {} 
	50% {}
	100% {}
}

• duration 动画经历的时间（s || ms）
• timing-function（linear || ease || ease-in || ease-out || ease-in-out || 贝塞尔曲线函数） 动画进行的曲线函数
• delay 动画等待执行时间（s || ms）
• interation（number || infinite） 动画执行的次数
• direction (boolean) 动画是否反向执行
• fill-mode （none || forwards || backwards || both|initial || inherit）默认值none执行动画前不会应用任何样式-----很少用到
• play-state: （paused || running） 指定动画运行和暂停

边框（阴影，圆角，图片）

• box-shadow(v-shadow,h-shadow,blur,spread,color,inset)

/**
  * v-shadow--水平方向偏移量-px
  * h-shadow--垂直方向偏移量-px
  * blur--阴影的模糊距离-px
  * spread--阴影的宽度（范围）-px
  * color--阴影的颜色-色值
  * inset--是否为内阴影-inset
  */

• border-radius（左上，右上，右下，左下）px || %
• border-image 边框图片

四、背景

• background-size(length|percentage|cover|contain)

length: 背景大小 如（200px 200px）
percentage: 百分比 如（100% 100%）
cover: 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小--不变形，铺不满.
contain: 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小--不变形，铺满，显示不全.

• background-origin: padding-box || border-box || content-box;
• background-position

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
.....只设置一个值是另外一个值默认为center
x% y%--百分比
xpos ypos--具体值