前端简单粗暴方法实现骨架屏（新手可懂）

最新推荐文章于 2024-05-18 17:41:40 发布

Young soul2

最新推荐文章于 2024-05-18 17:41:40 发布

阅读量661

点赞数 2

分类专栏：前端基础文章标签： javascript css

本文链接：https://blog.csdn.net/qq_35094120/article/details/118491688

版权

前端基础专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.skt-loading {
			pointer-events: none;
		}

		/* 加载中阻止事件 */
		.skt-loading .skeleton {
			position: relative;
			overflow: hidden;
			border: none !important;
			border-radius: 5px;
			background-color: transparent !important;
			background-image: none !important;
		}

		.skt-loading .skeleton::after {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			z-index: 9;
			width: 100%;
			height: 100%;
			background-color: #EBF1F8;
			display: block;
		}

		/* 下面这部分都是自定义的，看需求修改 */
		.skt-loading .skeleton::after {
			border-radius: 4px;
		}

		.skt-loading .skeleton::before {
			position: absolute;
			top: 0;
			width: 30%;
			height: 100%;
			content: "";
			background: linear-gradient(to right, rgba(255, 255, 255, 0) 0,
					rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, 0) 100%);
			transform: skewX(-45deg);
			z-index: 99;
			animation: skeleton-ani 1s ease infinite;
			display: block;
		}



		.skt-loading .skeleton.badge::after {
			background-color: #F8FAFC;
		}

		@keyframes skeleton-ani {

			/* 骨架屏动画 */
			from {
				left: -100%;
			}

			to {
				left: 150%;
			}
		}
	</style>
	<body>
		<div class="skt-loading">
			<div style="width: 500px;height: 30px;background-color: antiquewhite;">
				你好
			</div>
			<div style="width: 500px;height: 30px;background-color: antiquewhite;margin: 20px;">
				你好
				<div style="width: 500px;height: 30px;background-color: antiquewhite;margin: 20px;">
					你好
					<div style="width: 500px;height: 30px;background-color: antiquewhite;margin: 20px;">
						你好
						<div style="width: 500px;height: 30px;background-color: antiquewhite;margin: 20px;">
							你好

						</div>
					</div>
				</div>
			</div>
			<div style="width: 100%;height: 100px;background-color: antiquewhite;margin: 20px;">
				你好
			</div>
			<div style="width: fit-content;">
				<img src="img/test.jpg" />
			</div>
			<div>
				
			</div>
		</div>
	</body>
	<script type="text/javascript">
		function handleSkeleton(type) {
			let child = document.querySelector('.skt-loading').children;
			for (var i = 0; i < child.length; i++) {
				child.item(i).classList[type]('skeleton')
			}
		}

		handleSkeleton('add')
		setTimeout(() => {
			handleSkeleton('remove')
			document.querySelector('.skt-loading').classList.remove('skt-loading');
		}, 3000)
	</script>

</html>

使用骨架屏
在这里插入图片描述

Young soul2

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端简单粗暴方法实现骨架屏（新手可懂）

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> .skt-loading { pointer-events: none; } /* 加载中阻止事件 */ .skt-loading .skeleton { positio
复制链接

扫一扫