阅读 539
css实现简单骨架屏skeleton;可用于App,小程序,uniapp

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属性设置应该从父元素继承

这是效果图 

最后

如果对您有帮助,希望能给个👍评论收藏三连!

博主为人老实,无偿解答问题哦❤

每篇文章评论区各抽 1 位同学送出掘金周边马克杯实物 * 1 个

文章分类
前端
文章标签