CSS loading动画（animation-direction案例）

最新推荐文章于 2022-12-13 15:08:10 发布

zbailing

最新推荐文章于 2022-12-13 15:08:10 发布

阅读量166

点赞数

分类专栏： CSS 文章标签： css 动画 css3

本文链接：https://blog.csdn.net/zbailing/article/details/122997775

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS loading动画（animation-direction案例）</title>
    <style>
        body {
            margin: 0;
            padding: 50px;
        }
        * {
            box-sizing: border-box;
        }

        .loading {
            display: inline-flex; align-items: end;
            background-color: #eee;
            border: 1px solid #ddd;
            padding: 16px;

        }
        .loading .txt {
            font-size: 16px;
            width: 30px; height: 30px;
            text-align: center; line-height: 30px;
            background-color: #ddd;
            border-radius: 50%;
        }
        .loading .txt+div{
            margin-left: 8px;
        }
        .circle {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #7daeff;
            animation: ani 6s ease-in infinite alternate;
            /*
            animation-direction 定义是否轮流反向播放动画
                值：
                    normal 默认值正常播放
                    reverse 反向播放
                    alternate 从正常方向开始的轮流反向播放
                    alternate-reverse 从反方向开始的轮流反向播放
            */
        }
        @keyframes ani {
            0% {

            }
            5% {
                transform: translateY(-30px);
            }
            10% {
                transform: translateY(-30px) translateX(38px);
            }
            15% {
                transform: translateY(-30px) translateX(38px) translateY(38px);
            }
            20% {
                transform: translateY(-30px) translateX(76px) translateY(38px);
            }
            25% {
                transform: translateY(-30px) translateX(76px) ;
            }
            30% {
                transform: translateY(-30px) translateX(114px) ;
            }
            35% {
                transform: translateY(-30px) translateX(114px) translateY(38px);
            }
            40% {
                transform: translateY(-30px) translateX(152px) translateY(38px);
            }
            45% {
                transform: translateY(-30px) translateX(152px);
            }
            50% {
                transform: translateY(-30px) translateX(190px);
            }
            55% {
                transform: translateY(-30px) translateX(190px) translateY(38px);
            }
            60% {
                transform: translateY(-30px) translateX(228px) translateY(38px);
            }
            67% {
                transform: translateY(-30px) translateX(228px);
            }
            77% {
                transform: translateY(-30px) translateX(266px);
            }
            87% {
                transform: translateY(-30px) translateX(266px) translateY(38px);
            }
            95% {
                transform: translateY(-30px) translateX(304px) translateY(38px);
            }
            100% {
                transform: translateY(-30px) translateX(304px);
            }
        }
    </style>
</head>
<body>
<div style="text-align: center">
    <div class="loading">
        <div class="circle"></div>
        <div class="txt">加</div>
        <div class="txt">载</div>
        <div class="txt">中</div>
        <div class="txt">，</div>
        <div class="txt">请</div>
        <div class="txt">稍</div>
        <div class="txt">后</div>
        <div class="txt">！</div>
    </div>
</div>

<script>

</script>
</body>
</html>

zbailing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS loading动画（animation-direction案例）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS loading动画（animation-direction案例）</title> <style> body { margin: 0; padding: 50px; } .
复制链接

扫一扫