HTML CSS 中文本的加载效果

Question

我见过一些网站使用文本行加载效果。我搜索了很多但找不到叫什么。

影响：

是否有任何插件或 css 文件可以实现此效果，例如 bootstrap.

我知道这个问题有点傻，但我不知道在哪里问这个问题，我搜索了在哪里问问题 Html/CSS。

Answer 1

这很接近你想要的东西。它仅使用 CSS/HTML 完成，您可以根据自己的喜好轻松自定义它

https://jsfiddle.net/hau122w8/

<div class="timeline-item">
    <div class="animated-background">
        <div class="background-masker content-first"></div>
        <div class="background-masker content-top"></div>
        <div class="background-masker content-first-end"></div>
        <div class="background-masker content-second-line"></div>
        <div class="background-masker content-second-end"></div>
        <div class="background-masker content-third-line"></div>
        <div class="background-masker content-third-end"></div>
    </div>
</div>

.timeline-item {
    background-color: #fff;
    border: 1px solid;
    border-color: #ddd;
    border-radius: 3px;
    padding: 12px;
    margin: 0 auto;
}

@keyframes placeHolderShimmer {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 10000px 0;
    }
}

.animated-background {
    animation-duration: 10s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-name: placeHolderShimmer;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #aacfde 18%, #eeeeee 33%);
    height: 96px;
    position: relative;
}

.background-masker {
    background: #fff;
    position: absolute;
}

    /* Every thing below this is just positioning */

    .background-masker.content-top,
    .background-masker.content-second-line,
    .background-masker.content-third-line,
    .background-masker.content-second-end,
    .background-masker.content-third-end,
    .background-masker.content-first-end {
        top: 40px;
        left: 0;
        right: 0;
        height: 6px;
    }

    .background-masker.content-first {
        height: 10px;
        top: 15px;
        left: 0;
        right: 0;
    }

    .background-masker.content-top {
        height: 20px;
    }

    .background-masker.content-first-end,
    .background-masker.content-second-end,
    .background-masker.content-third-end {
        width: auto;
        left: 380px;
        right: 0;
        top: 60px;
        height: 8px;
    }

    .background-masker.content-second-line {
        top: 68px;
    }

    .background-masker.content-second-end {
        left: 420px;
        top: 74px;
    }

    .background-masker.content-third-line {
        top: 82px;
    }

    .background-masker.content-third-end {
        left: 300px;
        top: 88px;
    }