页面重构
主要结构
Div class=“world” 主页面背景。
Div class=“header” 主要内容部分
Div class=“main” 动画视觉区。
Div class=“footer” 版权区
Div class=“cloud” 在主背景上添加些云彩动画效果
主要代码
margin: 居中对齐，定位。
Width： 宽度。结合margin: 0 auto；实现区域居中定位。
Height：高度。
Position: 结合top、left，定位，绝对定位，页面可视区绝对定位。
background : 背景、背景定位、背景大小、平铺。
z-index: 层。
opacity: 不透明度。
动画效果
动画代码格式。
u动画绑定。
.bd-a{
-webkit-animation: a 6s linear infinite;
animation: a 6s linear infinite;
}
// .bd-a，用于给元件调用该类绑定的动画效果。 a为被绑定动画名称、6S表示动画持续6秒钟 、linear 动画运行速度为匀速、infinite动画无限次重复播放。
@-webkit-keyframes a{
0%{-webkit-transform:translate(1rem,0rem) scale(.9,.9); opacity: 0;}
50%{-webkit-transform:translate(0rem,0rem) scale(1,1); opacity:1;}
100%{-webkit-transform:translate(-1rem,0rem) scale(1.1,1.1); opacity: 1;}
}
@keyframes a{
0%{transform:translate(1rem,0rem) scale(.9,.9); opacity: 0;}
50%{transform:translate(0rem,0rem) scale(1,1); opacity:1;}
100%{transform:translate(-1rem,0rem) scale(1.1,1.1); opacity: 1;}
}
常用动画代码。
u0%{-webkit-transform:translate(1rem,0rem) scale(.9,.9); opacity: 0;}
Translate(1rem,0rem) 移动动画可上下左右移动。以元件左上角为坐标起点。更改逗号前数值为左右移动，更改逗号后数值是上下移动。0 ，0表示在原坐标上。负数是向左或向上移动，整数是向右或向下移动。
scale(.9,.9) 放大缩小 。例如 1,1 代表元件宽和高的原来大小。改变的大小是与我们所输出的数值相乘。
问题与解决
无完全覆盖页面出现空白区。
在body和html 标签中写入100%.背景不出现空白区body中加与主背景一样的背景色。
主动画区电脑扫描遮盖分层问题。
重新切图，小电脑从新定位，分好层级。
总结
编写速度慢，代码理解不够透，总反反复复去查意思。PS切图要继续提升，收获视乎对margin和padding position多理解了一点。