在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;
    }