前端组件 Skeleton Screen

写作动力来自于知乎专栏: 这个控件叫什么 中的 这个控件叫:Skeleton Screen/加载占位图

效果预览

这里主要用到的是liner-gradientbackground-position

使用linear-gradient生成一个渐变背景:

1
linear-gradient(90deg, red 25%, yellow 37%, red 63%)

linear-gradient(90deg, red 25%, yellow 37%, red 63%)

使用红色和黄色的原因是因为颜色比较清晰方便测试,正常使用可以替换为:

1
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);

想了解更多linear-gradient 的用法? 请阅读你真的理解CSS的linear-gradient, 文章详细解释了linear-gradient的一些工作细节并在文末提供了一个调整linear-gradient渐变效果的小工具, 上图出自于此。

将渐变容器的bcakground-size定义为 400%, 100%

1
background-size: 400% 100%;

因为这个时候背景比容器大(背景宽度为 容器宽度 * 400%),当background-position的值从100%递减到0%时,会有这样的效果:

background-position: 100%, background-position: 0%

然后通过animation不断播放这个动画

1
@keyframes loadding
2
	0%
3
		background-position: 100% 50%
4
5
	100%
6
		background-position: 0 50%	
7
8
#demo
9
	height: 50px
10
	width: 100%
11
	background: linear-gradient(90deg, red 25%, yellow 37%, red 63%)
12
	background-size: 400% 100%
13
	animation: loadding 1.2s ease infinite

这样就实现了一个简单的Skeleton Screen.