【css常用布局】未加载出的文字显示（小白向）

说明

可用在文字数据请求时间过久，未渲染页面前提前展示一个过度效果。

效果展示

实现原理

布局分析：

html部分：

<div class="container">
	<div class="text_container">
		<div class="text_intetval"> // 这个标签用来区分自然段
			<div class="text_item">
				<div class="text_item_block width40">
					<div class="text"></div>
				</div>
				<div class="text_item_block width30">
					<div class="text"></div>
				</div>
				
                      // ... 省略，这里按照宽度比例自由搭配
                      
				<div class="text_item_block width30">
					<div class="text"></div>
				</div>
			</div>
		</div>
		<div class="text_item">
			<div class="text_item_block width20">
				<div class="text"></div>
			</div>
			
                  // ... 省略
		</div>
	</div>
</div>

css部分：

.container{  // 这个只是用来居中显示
	display: flex;
	align-items: center;
	flex-direction: column;
}

.text_container {
	flex: 1 1 0%;
	padding: 16px;
	width: 300px; // 最好给个固定的宽度，比较好排版
}

.text_intetval {  // 区分自然段
	margin-bottom: 16px;
}

.text_item {  // 自然段
	display: flex;
	flex-wrap: wrap;
	justify-content: start;
	width: 100%;
}

.text_item_block { // 每句话的盒子
	margin-bottom: 8px;
	margin-right: 8px;
}

.text { // 句子
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 9999px;
	height: 4px;
	width: 100%;
}

.width50 {
	width: 50%;
}

.width40 {
	width: 40%;
}

.width30 {
	width: 30%;
}

.width20 {
	width: 20%;
}

.width10 {
	width: 10%;
}

给个赞再走呗！