动画

  * {<br />            margin: 0;<br />            padding: 0;<br />        }<br />        <br />        .box {<br />            display: flex;<br />            width: 250px;<br />            margin: 100px auto;<br />            font-size: 24px;<br />        }<br />        <br />        .box span {<br />            margin-right: 10px;<br />            animation: animate 1.5s linear infinite alternate;<br />            /* 动画无限 */<br />        }<br />        <br />        .box span:nth-child(1) {<br />            color: orchid;<br />        }<br />        <br />        .box span:nth-child(2) {<br />            color: plum;<br />            animation-delay: 0.3s;<br />        }<br />        <br />        .box span:nth-child(3) {<br />            color: darkorchid;<br />            animation-delay: 0.5s;<br />        }<br />        <br />        .box span:nth-child(4) {<br />            color: #f0f;<br />            animation-delay: .7s;<br />        }<br />        <br />        .box span:nth-child(5) {<br />            color: purple;<br />            animation-delay: .9s;<br />        }<br />        <br />        .box span:nth-child(6) {<br />            color: palevioletred;<br />            animation-delay: 1.2s;<br />        }<br />        <br />        @keyframes animate {<br />            0% {<br />                margin-top: 0;<br />            }<br />            50% {<br />                margin-top: -25px;<br />            }<br />            100% {<br />                margin-top: 0<br />            }<br />        }<br />    </style><br /></head>