【css3简单动画动画】实现星球大战画面变化

这个例子主要包括三个部分：上面的STAR，中间的text，下面的WARS。前端css布局的一个大问题——centering.starwars-demo{height:17em;宽度：34em；位置：绝对；左：50%；顶部：50%；/*转换*/transform:tran板岩(-50%,-50%);/*是3D*/transform-style:preserve-3d;视角：800px；}网页布局：1.普通模式是基于文档流布局（从左到右，从上到下一个块级元素，行内元素）2.定位（position）破坏文档流，3.浮动布局float:左侧PC端常用的布局方式4.flex弹性布局等分，父子关系布局5.网格布局九宫格这里我们使用position让整个starwars-demo居中：firstleft:50%andtop:50%，然后将容器本身向左上移动50%，从而达到居中的效果接下来就为各部分添加动画.star,.wars{position:absolute;}.star{顶部：-0.75em；动画：星星10s无限缓出；}@keyframesstar{0%{不透明度：0；变换：比例（1.5）；}20%{不透明度：1；}89%{不透明度：1；变换：比例（0.6）；}100%{不透明度：0；transform:translateZ(-400em)}}.wars{底部：-0.5em;动画：Wars10sease-outinfinite；}@keyframes战争{0%{不透明度：0；变换：比例（1.5）；}20%{不透明度：1；}89%{不透明度：1；变换：比例（0.6）；}100%{不透明度：0;transform:translateZ(-400em)}}.byline{位置：绝对；颜色：#ffffff；字体系列：Lato；字体样式：2.25em；左：2em；右：-2em；顶部：42%；字母间距：.4em；文本转换：大写；}.bylinespan{显示：内联块；动画：自旋字母10s线性无限；}.byline{动画：逐行移动10s线性无限；}@keyframes逐行移动{0%{transform:translateZ(5em);}100%{变换：translateZ(0);}}/*文字旋转*/@keyframesspin-letter{0%,100%{opacity:0;变换：rotateY(90deg)}30%{不透明度：1;}70%,80%{变换：旋转Y（0）；不透明度：1；}88%,100%{不透明度：0；}}知识有限，请多包涵