**
一.知识略解:
**
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展示
-->