页面布局
实现方法:
1.文本说明
先给body和html设置 winth : 100%; height : 100%; 属性，再给大盒子all设置 display : flex; 属性和 flex-direction : column;属性，子盒子nav和footer设置固定高度。main盒子设置flex:1属性。
2.代码实现
html,body{
width:100%;
height:100%
}
#all{
display:flex;
flex-direction:column;
}
#nav,#footer{
width:100%;
height:70px;
}
#main{
width:100%;
flex:1;
}
相关动画属性：
animation：动画名称 动画所需时间 动画播放方式 动画开始时间 循环次数 播放方向 播放状态 动画时间外属性
animation-name:动画名称-----声明的动画名称
animation-duration:动画所需时间---完成0%-100%动画所需时间
animation-timing-function:动画播放方式 ----同过渡
step-start 马上跳到动画每一结束桢的状态
animation-delay:等待动画的时间
animation-iteration-count:循环次数----默认为1，infinite循环播放
animation-direction:播放方向----默认normal，向前播放；alternate，播放次数为偶数则向前播放，为奇数时向反方向播放；
animation-play-state:播放状态-----running播放和pause暂停
animation-fill-mode:动画时间外属性----forwards动画结束后保持最后状态；backforwards会向元素应用动画样式时迅速应用动画初始值。
关键帧声明动画@keyframes:
@keyframes name{
from{
css样式；
}
percentage{
css样式；
}
to{
css样式；
}
}
@keyframes name{
0%{
css样式；
}
percentage{
css样式；
}
100%{
css样式；
}
}
调用@keyframes声明的动画：
animation:run 1s infinite alternate forwards;
閱讀更多 千鋒H5 的文章
