骨架屏就是页面初加载数据没显示出来之前显示的一个页面，展示页面渲染好之后再隐藏骨架屏，相当于一个加载页面
我是用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属性设置背景图像的起始位置。
这是效果图
