标签：
页面重构
margin: 居中对齐，定位。
Width： 宽度。结合margin: 0 auto；实现区域居中定位。
Height：高度。
Position: 结合top、left，定位，绝对定位，页面可视区绝对定位。
background : 背景、背景定位、背景大小、平铺。
z-index: 层。
opacity: 不透明度。
动画效果
.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;}
}
Translate(1rem,0rem) 移动动画可上下左右移动。以元件左上角为坐标起点。更改逗号前数值为左右移动，更改逗号后数值是上下移动。0 ，0表示在原坐标上。负数是向左或向上移动，整数是向右或向下移动。
scale(.9,.9) 放大缩小 。例如 1,1 代表元件宽和高的原来大小。改变的大小是与我们所输出的数值相乘。
问题与解决
重新切图，小电脑从新定位，分好层级。
总结
标签：
原文地址：http://www.cnblogs.com/lzsxi/p/4488344.html
