CSS content换行技术实现字符animation loading效果

最新推荐文章于 2023-03-14 14:25:39 发布

front_end_fan

最新推荐文章于 2023-03-14 14:25:39 发布

阅读量588

点赞数 1

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

本文链接：https://blog.csdn.net/qq_39198420/article/details/76582814

版权

纯CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

效果图
方法1：ch单位等宽字体+text-indent点点点动画

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            .grebtn{text-decoration: none;padding: 4px 10px;background: #00f;color: #fff;}
            @supports (display:none) {
                span {
                    display: inline-block;
                    width: 3ch;
                    text-indent: -1ch;
                    vertical-align: bottom;
                    overflow: hidden;
                    animation: load 3s infinite step-start both;
                    font-family: Consolas, Monaco, monospace;
                }
            }

            @keyframes load {
                33% { text-indent: 0; }
                66% { text-indent: -2ch; }
            }
        </style>
    </head>
    <body>
        <a href="javascript:" class="grebtn">订单提交中<span>...</span></a>
    </body>
    </html>

方法2：伪元素::before+content+animattion

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .grebtn{text-decoration: none;padding: 4px 10px;background: #00f;color: #fff;font-weight: bold}
        span {
            display: inline-block;
            height: 1em; line-height: 1;
            vertical-align: -.25em;
            overflow: hidden;
        }
        span::before {
            display: block;
            content: '...\A..\A.';
            white-space: pre-wrap;
            animation: waite 3s infinite step-start both;
        }
        @keyframes waite {
            33% { transform: translateY(-2em); }
            66% { transform: translateY(-1em); }
        }
    </style>
</head>
<body>
<a href="javascript:" class="grebtn">订单提交中<span>...</span></a>
</body>
</html>

front_end_fan

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS content换行技术实现字符animation loading效果

效果图方法1：ch单位等宽字体+text-indent点点点动画 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .grebtn{text-decoration: none;pa
复制链接

扫一扫