Skeleton Screen/加载占位图流光闪动效果收集

Skeleton Screen Loading，又叫 Skeleton Screen/加载占位图，就是显示dom骨架，加上流光加载效果。

骨架流光的原理，就是渐变色(linear-gradient多个颜色) + 背景拉伸(background-size: 400% 100%) + 背景移动(background-position)

li{
    background-image: linear-gradient(90deg, #ff0000 25%, #41de6a 37%, #ff0000 63%);
    width: 100%;
    height: 0.6rem;
    list-style: none;
    background-size: 400% 100%;
    background-position: 100% 50%;
    animation: skeleton-loading 1.4s ease infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

2. 骨架屏动画实现

.animated-bg {
    animation: shimmer 1s forwards linear infinite;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 800px 104px;
    height: 96px;
}
@keyframes shimmer{
    0%{
        background-position: -468px 0
    }
    100%{
        background-position: 468px 0
    }
}

3. CSS骨架屏载入动画

.video {
    width: 320px;
    height: 250px; 
}
.video:empty {
    cursor: progress;
    background:
        linear-gradient(0.25turn, transparent, #fff, transparent),
        linear-gradient(#eee, #eee),
        radial-gradient(40px circle at 20px 20px, #EEE 50%, transparent 51%),
        linear-gradient(#eee, #eee);
    background-repeat: no-repeat;
    background-size: 320px 250px,320px 200px, 40px 40px, 270px 40px;
    background-position: -320px 0, 0 0, 0 210px, 50px 210px;
    animation: loading 1.5s infinite;
}
@keyframes loading {
    to {
        background-position: 320px 0, 0 0, 0 210px, 50px 210px;
    }
}

4. 简单的骨架屏流光 (完整源码)

:root {
    --ske-back-color: #edeeef;
    --ske-logo: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJEAAACQCAMAAAA/Wnm0AAAAclBMVEUAAADOzs7Ly8vLy8vNzc3Nzc3Nzc3Nzc3Ozs7Ozs7Nzc3Ozs7Ozs7Nzc3Nzc3Nzc3Nzc3Ozs7Nzc3Ozs7Ly8vNzc3Nzc3MzMzNzc3Ozs7Pz8/T09PNzc3GxsbNzc3Ozs7Nzc3Ozs7Dw8PNzc3Nzc3Nzc0RvztGAAAAJXRSTlMAv0CA5vuyqWge4NCtjFb1zXhbOCvHtlBHQxcPDQnu1Z+WEXBgGoQieAAAAbRJREFUeNrt2FlugzAUheEDDoEMJEDIPLf1/rfYvgXXVBRfJ7jV+Rdw9Fnyg2Ww/1P8yvCbIv26KKKIotYo+huiyHdikYLnKKKIIooooogiiiiiiCKKKLJFdXCiyfCikyk6Dy/aG6AlhheVhmgagGhuiIrhRSttlA4vSk3RYnDRQpsdhxZl2izFsKKV0t/KnESxj7Yf7+qqrSZAWD+jCoGJNghMtERoojow0fiMoERJBYQkWs5rBCQq8u0RPYue0viWl9lifwRjjDHGGGPPKHIvhpUSzHl46reJtHsUUUQRRSGLVNxZH1HcXacIXfUSoTOKKKKIIooooogiiiiiiCKKKKKIIooooogiihxElV9RJReVulEtFpVy0V03OohFd7lorB8lkIjsOReReRNHIpE95yQa60YzkciecxHFulkqEtlz/UUHNTImFiKRPddTNFl9DZi9CUTtc7Yo+qH1NNFWc7SK5HORdixrFwnmhKLZSSSy58SiHbyKdpCKFLyKFKSiDbyKNhCKkj28irYQivIzfIrSCUSiIt8B/kSjWwU4iZLLaDpbzzPjPALR8jK9FlEe49EnhCEDxcCbebMAAAAASUVORK5CYII=");
}

._ske_loading ._ske_color,
._ske_loading ._ske_tag {
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) 40%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0) 60%
        )
        var(--ske-back-color);
    background-size: 200% 100%;
    background-position: 100% 50%;
    background-position-x: 180%;
    animation: 1s _ske_loading ease-in-out infinite;
}
._ske_color {
    background-color: var(--ske-back-color);
}
._ske_logo {
    position: relative;
}
._ske_logo::after {
    content: "";
    width: 30px;
    height: 30px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: var(--ske-logo) center/100% no-repeat;
}
@keyframes _ske_loading {
    to {
        background-position-x: -20%;
    }
}