直接上图（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;           
        }

网页布局：
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;
            }
        }

知识有限，不足之处请多包涵。

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=hb1k110k0bb