Vic*_*gor 30
你可以使用一些css背景线性渐变:
@keyframes placeHolderShimmer{
0%{
background-position: -468px 0
}
100%{
background-position: 468px 0
}
}
.linear-background {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 1000px 104px;
height: 338px;
position: relative;
overflow: hidden;
}<div class="linear-background">
</div>并使用白色div绘制效果:
@keyframes placeHolderShimmer{
0%{
background-position: -468px 0
}
100%{
background-position: 468px 0
}
}
.linear-background {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 1000px 104px;
height: 200px;
position: relative;
overflow: hidden;
}
.inter-draw{
background: #FFF;
width: 100%;
height: 100px;
position: absolute;
top: 100px;
}
.inter-right--top{
background: #FFF;
width: 100%;
height: 20px;
position: absolute;
top: 20px;
left: 100px;
}
.inter-right--bottom{
background: #FFF;
width: 100%;
height: 50px;
position: absolute;
top: 60px;
left: 100px;
}
.inter-crop{
background: #FFF;
width: 20px;
height: 100%;
position: absolute;
top: 0;
left: 100px;
}<div class="linear-background">
<div class="inter-draw"></div>
<div class="inter-crop"></div>
<div class="inter-right--top"></div>
<div class="inter-right--bottom"></div>
</div>如果你需要做多个,这可能很费力,所以这个库自动化:placeload.js
max*_*ler 18
您可以查看此博客文章,其中详细描述了Facebook上的占位符如何工作:
http://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html
基本上,你输入一些静态html样式与css看起来类似于即将到来的内容.
<div class="placeholder">
<!-- some boxes in light grey to look like content -->
</div>
加载完成后,删除占位符:
$(".placeholder").remove();
zal*_*log 11
如果你们需要一个用于占位符加载动画的 npm 包，我做了这个：https : //github.com/zalog/placeholder-loading
这是一个可以根据需要进行配置的库。
它是响应式的、快速的、简单的、gpu 优化的动画和 css。
演示：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo placeholder-loading</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://unpkg.com/placeholder-loading/dist/css/placeholder-loading.min.css" rel="stylesheet">
</head>
<body>
<div class="ph-item">
<div class="ph-col-2">
<div class="ph-avatar"></div>
</div>
<div>
<div class="ph-row">
<div class="ph-col-4"></div>
<div class="ph-col-8 empty"></div>
<div class="ph-col-6"></div>
<div class="ph-col-6 empty"></div>
<div class="ph-col-2"></div>
<div class="ph-col-10 empty"></div>
</div>
</div>
<div class="ph-col-12">
<div class="ph-picture"></div>
<div class="ph-row">
<div class="ph-col-10 big"></div>
<div class="ph-col-2 empty big"></div>
<div class="ph-col-4"></div>
<div class="ph-col-8 empty"></div>
<div class="ph-col-6"></div>
<div class="ph-col-6 empty"></div>
<div class="ph-col-12"></div>
</div>
</div>
</div>
</body>
</html>| 归档时间： |
|
| 查看次数： |
26256 次 |
| 最近记录： |