WEB小实践(2)--太极图

**

一.知识略解：

**
1.渐变色：linear-gradient:(direction, color-stop1, color-stop2, …)
例如：linear-gradient(#000 50%,#fff 50%);//direction默认方向是to bottom,即向下填充linear-gradient(#000 50%,#fff 50%);
2.弹性盒模型：display:flex;
(1)弹性盒模型的子元素必须要沿着父级的主轴来排列，主轴方向为水平方向
(2)子元素的width如果之和不超过父元素的width，就按照原数值来显示，如果之和大于父元素的width，就按照比例给子元素的width值，即如果父元素:width:600px,子元素1：width：400px,子元素2：500px,那么子元素1最终显示为400/(400+500)*600px，子元素2为500/(400+500)*600px;
(3)align-items:设置弹性盒模型竖直方向的排列 center为居中
(4)响应式布局：一个网页能够适配多个设备
3.动画
(1)关键帧：@keyframes
(2)transform:scale(数值),实现图形的放缩
(3)animation: changeSize_right 1s infinite alternate;动画样式：动画名称 动画时长 动画播放方式(infinite/无限循环/ alternate/倒带播放/)
(4)变换原点：transform-origin:水平位置 竖直位置
(5)animation-delay；动画延迟

**

二.应用实例：

**
CSS部分

@keyframes changeSize{
		from{transform:scale(0.5);}
		to{transform:scale(1.5)}
	}
	body{
		background:#ccc;
	}
	.taichi{
		display:flex;/*弹性盒模型*/
		align-items:center;/*设置盒模型子元素竖直居中*/
		width:400px;
		height:400px;
		background:linear-gradient(#000 50%,#fff 50%);
		margin:100px auto 0;
		border-radius:50%;
	}
	.taichi:before,.taichi:after{
		content:"";
		display:block;/*用css的伪类模拟div的内部的无内容的元素*/
		width:50px;
		height:50px;
		border-radius:50%;
		animation: changeSize 1s infinite/*无限循环*/ alternate/*倒带播放*/ linear/*匀速*/;
	}
	.taichi:before{
		background:#fff;
		border:75px solid #000;
		/*animation: changeSize 1s infinite*//*无限循环*//* alternate*//*倒带播放*/ /*linear*//*匀速*/;/*动画样式：动画名称 动画时长*/
		transform-origin:0 50%; 
/*		transform:scale(1);*//*变化：大小(倍数 1~+00)*/
	}
	.taichi:after{
		background:#000;
		border:75px solid #fff;
		/*animation: changeSize 1s infinite alternate linear;*/
		transform-origin:100% 50%; 
		animation-delay:-1s;
	}

body部分：

<i class="taichi">
		<!-- <div class="leftc">	
		</div>
		<div class="rightc">	
		</div> -->
		<!-- <div class="topc"></div>
		<div class="bottomc"></div> -->
	</i>
	<!-- i标签实现logo展示
 -->