CSS 3.0实现音阶加载中动画

越陌度阡

发布于 2020-11-26 11:38:16

9110

发布于 2020-11-26 11:38:16

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）

给大家分享一个用CSS 3.0实现的音阶加载中的动画，效果如下：

以下是代码实现，欢迎大家复制粘贴和收藏。

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>CSS 3.0实现音阶加载中动画</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                font-family: "微软雅黑"
            }

            body {
                display: flex;
                align-items: center;
                justify-content:center;
                min-height: 100vh;
                background: #000;
            }

            .step {
                position: relative;
                -webkit-box-reflect: below -12px linear-gradient(transparent, rgba(0, 0, 0, 0.2))
            }

            .step span {
                position: relative;
                display: inline-block;
                color: #fff;
                font-size: 2em;
                animation: animate 1s ease-in-out infinite;
                animation-delay: calc(.1s*var(--i))
            }

            @keyframes animate {
                0% {
                    transform: translateY(0px)
                }

                20% {
                    transform: translateY(-24px)
                }

                40%,
                100% {
                    transform: translateY(0px)
                }
            }
        </style>
    </head>

    <body>
        <div class="step">
            <span style="--i:1">内</span>
            <span style="--i:2">容</span>
            <span style="--i:3">加</span>
            <span style="--i:4">载</span>
            <span style="--i:5">中</span>
            <span style="--i:6">.</span>
            <span style="--i:7">.</span>
            <span style="--i:8">.</span>
        </div>
    </body>

</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/05/30 ，如有侵权请联系 cloudcommunity@tencent.com 删除

动画

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

动画

登录后参与评论

0 条评论

热度

CSS 3.0实现音阶加载中动画

CSS 3.0实现音阶加载中动画

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐