实现

2023年06月08日

柏拉文

越努力，越幸运

一、透明度

---

html

<div class="skeleton skeleton-animate">
    <div class="skeleton-avatar skeleton-avatar-round"></div>
    <div class="skeleton-content">
        <div class="skeleton-title"></div>
        <div class="skeleton-paragraph"></div>
        <div class="skeleton-paragraph"></div>
    </div>  
</div>

css

@keyframes skeleton-animation {
    50% {
        opacity: 0.6;
    }
}
.skeleton{
    width: 400px;
    margin: 0 auto;
    display: flex;
    gap: 12px;
}
.skeleton.skeleton-animate{
    animation: skeleton-animation 1.2s ease-in-out infinite;
}
.skeleton-avatar{
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: #eee;
}
.skeleton-avatar.skeleton-avatar-round{
    border-radius: 50%;
}
.skeleton-content{
    width: 100%;
}
.skeleton-title{
    width: 40%;
    height: 16px;
    background: #eee;
}
.skeleton-paragraph{
    width: 100%;
    height: 16px;
    margin-top: 12px;
    background-color: #eee;;
}

二、背景渐变

---

html

<div class="skeleton">
    <div class="skeleton-avatar skeleton-avatar-round skeleton-animate"></div>
    <div class="skeleton-content">
    <div class="skeleton-title skeleton-animate"></div>
    <div class="skeleton-paragraph skeleton-animate"></div>
    <div class="skeleton-paragraph skeleton-animate"></div>
    </div>
</div>

css

@keyframes skeleton-animation {
    0% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}
.skeleton {
    width: 400px;
    margin: 0 auto;
    display: flex;
    gap: 12px;
}
.skeleton-animate {
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.06) 25%,
        rgba(0, 0, 0, 0.15) 37%,
        rgba(0, 0, 0, 0.06) 63%
    );
    background-size: 400% 100%;
    animation-name: skeleton-animation;
    animation-duration: 1.4s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}
.skeleton-avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
}
.skeleton-avatar.skeleton-avatar-round {
    border-radius: 50%;
}
.skeleton-content {
    width: 100%;
}
.skeleton-title {
    width: 40%;
    height: 16px;
}
.skeleton-paragraph {
    width: 100%;
    height: 16px;
    margin-top: 12px;
}