mocka是一款简单的CSS3网页内容placeholder占位特效。它可以在网页加载的过程中，在显示内容的地方显示预定的CSS3动画，增强用户体验。
安装
可以通过npm来安装mocka.css文件。
npm install mocka-placeholder
使用方法
在页面中引入mocka.css文件。
<link rel="stylesheet" href="path/to/mocka.css">
HTML结构
在你需要添加内容占位的地方添加下面的HTML代码：
<div class="mocka-container">
<span class="mocka-media"></span>
<span class="mocka-heading"></span>
<span class="mocka-text"></span>
</div>
自定义样式
mocka使用sass来编写，你可以修改sass文件来自定义自己的CSS3动画效果。
$mocka: (
prefix: 'mocka',
container: (
name: 'container',
width: 20rem,
height: 9.5rem,
background: #fafafa,
border-radius: 0.125rem,
border: 0.0625rem solid #acacac
),
media: (
name: 'media',
top: 0.5rem,
left: 0.5rem,
width: 4rem,
height: 4rem,
border-radius: 0
),
heading: (
name: 'heading',
top: 1.125rem,
left: 5rem,
width-base: 100%,
width-offset: 5.5rem,
height: 0.875rem,
border-radius: 0
),
subheading: (
top: 1.5rem,
width: 85%,
height: 0.875rem,
border-radius: 0
),
text: (
name: 'text',
top: 5.25rem,
left: 0.5rem,
line1-width-base: 85%,
line1-width-offset: 1rem,
height: 0.75rem,
line2-top: 1.25rem,
line2-width-base: 120%,
line2-width-offset: 1rem,
line3-top: 2.5rem,
line3-width-base: 90%,
line3-width-offset: 0,
border-radius: 0
),
dots: (
top: 2rem,
height: 0.5rem,
width: 0.5rem,
space-around: 0.75rem,
space-between: 0.5rem,
border-radius: 1rem,
background: #7a7a7a,
),
animation: (
name: 'dot',
duration: 1.8s,
timing-function: ease,
iteration-count: infinite,
dot1-y-offset: -0.3125rem,
dot2-y-offset: -0.4375rem,
dot3-y-offset: -0.3125rem
),
background: #c9c9c9
);
mocka内容占位特效的github地址为：https://github.com/Chalarangelo/mocka
