摘要：接下來就為各個部分添加動畫文字旋轉知識有限，不足之處請多包涵。

整體的html不多贅述

        
        
        

            The
            Force
            Awakens
        
    

這個例子主要包含三個部分：上面的STAR，中間的文字，下面的WARS
首先考慮的是三部分的定位，這里首先遇到前端css布局的一大問題--居中

 .starwars-demo{
            height: 17em;
            width: 34em;
            position: absolute;
            left: 50%;
            top: 50%;
            /* 變形 */
            transform: translate(-50%,-50%);
            /* 是3D  */
            transform-style: preserve-3d;
            perspective: 800px;           
        }

網頁布局：
1、正常模式基于文檔流的布局（從左到右，從上到下塊級元素，行內元素）
2、定位（position）破壞文檔流，
3、浮動布局 float：left pc端常用的布局方式
4、flex 彈性布局 等分，及父子關系布局
5、grid 布局 九宮格
這里我們用position來對整個starwars-demo進行居中定位：首先left: 50%和top: 50%，然后再往左和上移動容器自身的50%，這樣就達到了居中的效果。

接下來就為各個部分添加動畫

 .star,.wars{
            position: absolute;
        }
        .star{
            top: -0.75em;
            animation: star 10s ease-out infinite;
        }
        @keyframes star{
            0%{
                opacity: 0;
                transform: scale(1.5);
            }
            20%{
                opacity: 1;
            }
            89%{
                opacity: 1;
                transform: scale(0.6);
            }
            100%{
                opacity: 0;
                transform: translateZ(-400em)
            }
        }
        .wars{
            bottom: -0.5em;
            animation: wars 10s ease-out infinite;
        }
        @keyframes wars{
            0%{
                opacity: 0;
                transform: scale(1.5);
            }
            20%{
                opacity: 1;
            }
            89%{
                opacity: 1;
                transform: scale(0.6);
            }
            100%{
                opacity: 0;
                transform: translateZ(-400em)
            }
        }
        .byline{
            position: absolute;
            color: #ffffff;
            font-family: Lato;
            font-style: 2.25em;
            left: 2em;
            right: -2em;
            top: 42%;
            letter-spacing: .4em;
            text-transform: uppercase;
        }
        .byline span{
            display: inline-block;
            animation: spin-letter 10s linear infinite;
        }
        .byline{
            animation: move-byline 10s linear infinite;
        }

        @keyframes move-byline{
            0%{
                transform:translateZ(5em);
            }
            100%{
                transform:translateZ(0);
            }
        }
                /* 文字旋轉 */
        @keyframes spin-letter{
            0%,100%{
               opacity: 0;
               transform: rotateY(90deg)
            }
            30%{
                opacity: 1;
            }
            70%,80%{
                transform: rotateY(0);
                opacity: 1;
            }
            88%,100%{
                opacity: 0;
            }
        }

知識有限，不足之處請多包涵。