CSS3_过度+动画+布局_企业必备技能

03过度+旋转+移动:2D 3D

完整过度

transition-property: all; <!-- 所有元素都参与过度-->
transition: all `在这里插入代码片`2s linear 1s;<!-- 连续设置 过度效果 -->

单独或多个设置拆解

transition-property: width,background;	<!-- 设置多个属性有过度-->
transition: width 2s ; 					<!-- 只单独设置宽度有过度-->
transition-duration: 2s,4s ;			<!-- 设置过度的时间,分别是对应的 -->
transition-timing-function: ease(默认);	<!-- 设置缓冲的描述 --> 
							ease;从慢到快再慢
							linear;线性速度
							ease-out;从快到慢
							ease-in;从慢到快
							cubic-bezier(0.63, 0.08, 0.25, 1);贝塞尔曲线
transition-delay: 0.5s;		<!-- 设置延迟时间,鼠标经过这个属性后延迟几秒开始过度 -->

触发机制 :hove (鼠标停留)

可鼠标停留触发 也可以单击后触发 也可以监听按键触发

旋转

2D旋转+移动

transform:rotate(200deg);		<!-- 2D旋转 --> 
transform:  translate(100px);	<!-- 2D移动 -->
			translate(x,y); x代表水平的移动距离, y 代表垂直水平移动的距离
			translateX(100px); 水平移动
			translateY(400px); 垂直移动

3D旋转+移动

注意:要想看到3D效果,必须要在body样式设置 透视点
perspective: 500px;

transform: rotate3d(300deg);<!-- 旋转 --> 
transform:rotateX(100deg);<!-- 旋转 -->
transform: rotateY(200deg);<!-- 旋转 -->
transform: rotateZ(150deg);<!-- 旋转 -->
transform:translate3d(200deg);移动
transform: translateZ(45deg);放大,Z轴是在眼睛的视角,移动过来就是放大或者缩小

04动画

调用动画

综合一次设置

animation: donghua1 3s;/*设置动画的触发按钮(一次性设置)
animation: all donghua1 3s linser 0.5s;/*设置动画的触发按钮(完整设置)

单独设置

animation-name:donghua;				<!-- 动画的名称 -->
animation-duration:2s;				<!-- 动画的时间周期 -->
animation-timing-function:ease(默认) <!-- 动画变化的速度 -->
						  linear;  线性速度
						  ease-out 贝塞尔曲线
animation-delay: .25s;				<!-- 设置动画的延迟 -->
animation-iteration-count:1;		<!-- 动画循环的次数  -->
						  infinite无限次
animation-direction:(normal默认值);		<!-- 运动的方向 -->
					alternate;			<!-- 奇数的反方向 偶数次反方向运动 -->
					reverse;			<!-- 反方向运动 -->
					alternate-reverse;	<!-- 奇数次反方向,偶数次正方向运动 -->

动画设置

使用案列1

@keyframes donghua{
	from{}
	to{}
}

使用案列2

@keyframes donghua{
	/* from{} */
	0%{
		transform: translate(0,0);
	}
	30%{
		transform: translate(500px,0);
	}
	100%{
		transform: translate(300px,400px);
	}
}

05弹性布局

设置弹性布局

display: flex
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

设置主轴内容分布

justify-content: flex-start;	<!-- 默认向主轴,开始位靠拢 -->
justify-content: center;		<!-- 向主轴中心居中 -->
justify-content: flex-end;		<!-- 向主轴,结束位靠拢 -->
justify-content: space-around;	<!-- 平均分布,两边有间距,两边间距是中间的一半 -->
justify-content: space-between;	<!-- 平均分布,两边没有间距 -->
justify-content: space-evenly;	<!-- 平均分布,两边有间距 -->

设置多行分布

flex-wrap: nowrap;				<!-- 默认不换行 -->
flex-wrap: wrap;				<!-- 换行 -->
align-content: center;			<!-- 向中间,靠拢 -->
align-content: flex-start;		<!-- 向开始端,靠拢 -->
align-content: flex-end;		<!-- 向结束端,靠拢 -->
align-content: space-between;	<!-- 平均分布,两边没有距离 -->
align-content: space-around;	<!-- 平均分布,两边有间距,两边间距是中间的一半 -->
align-content: space-evenly;	<!-- 平均分布,所有的间距一致 -->

设置侧轴的内容分布

align-items: stretch;   <!-- 默认  如果设置高度 拉伸无效 -->
align-items:flex-start; <!-- 向开始端,靠拢 -->
align-items:flex-end;	<!-- 向结束端,靠拢 -->

align-items: baseline; 
align-items: center;	<!--居中 设置盒子或者已经设置弹性布局的前提下 -->
align-items: flex-end; 
align-items: inherit; 
align-items: initial; 
align-items: auto;

空间分布

flex: 1;	<!-- 一般用在 同级元素下,设置该元素占据多少分 1,2,3类推-->

子元素排序

order: 1;	<!-- 一般用在同级元素 设置 元素排序前后的命令 -1,1,2类推-->

单独设置元素的位置

align-self: center;	<!-- 可单独设置该子元素的位置 -->

06移动响应布局

<!-- 快捷输入metav -->
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!-- 一般我们根据涉及高给的宽度,直接写死就可以了,屏幕会自动适应 -->
	<meta name="viewport" content="width=750,user-scalable=no" />

根据不同的设备,展示不同的(样式)媒体查询

内嵌式_媒体查询

		@media screen and ( min-width: 1200px){样式代码}
PC端 	@media only screen and (max-width:1200px) and (min-width:600px){样式代码}
平板端	@media only screen  and (min-width:600px) and (max-width:1200px){样式代码}

外链式_媒体查询

当代码量大的时候,我们可以直接使用引入外部css , 当页面发生改变的时候,只加载对应的css 直接使用link标签
	<link rel="stylesheet" type="text/css" href="css/01.css" media="screen and (min-width: 1200px)">
	<link rel="stylesheet" type="text/css" href="css/02.css" media="screen and (min-width: 700px) and (max-width:1199px)">
	<link rel="stylesheet" type="text/css" href="css/03.css" media="screen and (max-width: 699px)">
注意:必须留活口!	 对于ie不兼容media , 需要书写一个不书写media媒体查询的样式
	<link rel="stylesheet" type="text/css" href="css/code.css" >