css 骨架屏

最新推荐文章于 2024-08-20 12:04:11 发布

搬砖的小宝

最新推荐文章于 2024-08-20 12:04:11 发布

阅读量229

点赞数 3

分类专栏： uniapp使用日记文章标签： css 前端

本文链接：https://blog.csdn.net/m0_57462721/article/details/139304250

版权

uniapp使用日记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

骨架屏布灵布灵的感觉真的看着让人很舒服

布局的样式需要自己根据页面的显示自己弄个背景就可以样式的话如下：

/* 骨架屏加载 */
.mcn-skeleton {
	background-color: #262441;
	background: linear-gradient(90deg, #262441 25%, #2e2b4f 37%, #262441 50%);
	background-size: 400% 100%;
	animation: mcnSkeleton 1.8s ease infinite
}

@keyframes mcnSkeleton {
	0% {
		background-position: 100% 50%
	}

	100% {
		background-position: 0 50%
	}
}

我是写了一个通用的类样式，这样整个项目都可以直接用。

background: linear-gradient(90deg, #262441 25%, #2e2b4f 37%, #262441 50%); 匹配项目背景色著需要修改这个就可以了