CSS 3动画疑难杂症-文字浮动

最新推荐文章于 2024-03-25 19:05:35 发布

原创最新推荐文章于 2024-03-25 19:05:35 发布

· 263 阅读

0 ·

版权

文章标签：

#css3

前端专栏收录该内容

6 篇文章

订阅专栏

今日CSS 3动画疑难杂症

效果文字浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 定义动画 */
        @keyframes strat {
            0%{
                 transform:translateY(0 );
            }
           
            100% {
                transform:translateY(20px);
            }
        }
        .box {
            width: 300px;
            height: 80px;
            margin: 200px auto;
            font-size: 30px;
        }
        span {
            display: inline-block;
             /* 开启动画 */
             animation: strat .5s infinite   alternate;
        }
        .one{
            animation-delay: .1s;
        }
        .two{
            animation-delay: .2s;
        }
        .three{
            animation-delay: .3s;
        }
        .four{
            animation-delay: .4s;
        }
        .five{
            animation-delay: .5s;
        }
        .six{
            animation-delay: .6s;
        }
        .seven{
            animation-delay: .7s;
        }
    </style>

</head>
<body>
    <div class="box">
        <span class="one">L</span>
        <span class="two">O</span>
        <span class="three">A</span>
        <span class="four">D</span>
        <span class="five">I</span>
        <span class="six">N</span>
        <span class="seven">G</span>
    </div>
</body>
</html>