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, ...);

值	描述
direction	用角度值指定渐变的方向（或多少度）。默认从上到下，to属性是从左到右；
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属性设置背景图像的起始位置。

值	描述
left top left center left bottom right top right center right bottom center top center center center bottom	如果仅指定一个关键字，其他值将会是"center"
x% y%	第一个值是水平位置，第二个值是垂直。左上角是0％。右下角是100％。如果仅指定了一个值，其他值将是50％。 默认值为：0％0％
xpos ypos	第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions
inherit	指定background-position属性设置应该从父元素继承

这是效果图