【css3簡單animation動畫】實現星球大戰熒幕變幻

直接上圖（gif）

總體的html很少贅述

<div class="starwars-demo">
        <img src="./images/star.svg" alt="" class="star">
        <img src="./images/wars.svg" alt="" class="wars">
        <h2 class="byline">
            <span>T</span><span>h</span><span>e</span>
            <span>F</span><span>o</span><span>r</span><span>c</span><span>e</span>
            <span>A</span><span>w</span><span>a</span><span>k</span><span>e</span><span>n</span><span>s</span>
        </h2>
    </div>

這個例子主要包含三個部分：上面的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;           
        }

網頁佈局：
一、正常模式基於文檔流的佈局（從左到右，從上到下塊級元素，行內元素）
二、定位（position）破壞文檔流，
三、浮動佈局 float：left pc端經常使用的佈局方式
四、flex 彈性佈局 等分，及父子關係佈局
五、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;
            }
        }

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