css实现简单骨架屏skeleton；可用于App,小程序,uniapp

骨架屏就是页面初加载数据没显示出来之前显示的一个页面，展示页面渲染好之后再隐藏骨架屏，相当于一个加载页面

我是用uniapp写的，小程序，APP，

Vue

页面同理：

有个简单的结构就可以

<template>
    <view class="list">
        <view class="lbt" v-if="lbt">
        </view>
        <view class="flex-s" v-if="klist">
            <view class="kapian" v-for=" i in 4">
            </view>
        </view>
        <view class="lists" v-for=" i in 4">
        </view>
    </view>
</template>      

这里会用到一个css的函数

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);      

<style lang="scss">
.lists {
            background: #eee;                /*从多少度开始，到25%是#eee,37%是#fff*/
            background-image: linear-gradient(90deg, #eee 25%, #fff 37%, #eee 63%);
            width: 100%;
            height: 0.6rem;
            list-style: none;
            background-size: 400% 100%;
            background-position: 100% 50%;
            animation: skeleton-loading 0.8s infinite; /*infinite规定动画播放无限次*/
                @keyframes loading {            /*右下角 中间*/
                  0% {    background-position: 100% 50%;
                  }                             /*左上角 中间*/
                  100% {    background-position: 0 50%;
                  }
 
                }
        }
 
</style>      

 background-position属性设置背景图像的起始位置。

这是效果图