用HTML和CSS制作现流行的UI Placeholder

前言

最近在使用facebook, instagram等主流应用经常看到的，即加载内容时的UI placeholer.(骨架设计)

可以给用户一种页面加载速度提升的错觉。如果如图所示。



 
 

制作步骤

步骤1

ui-placeholder的容器设计，效果如图所示


HTML

<div class="placeholder-wrapper">
    <div class="placeholder-item">
    </div>
</div>


CSS

.placeholder-item {
    background: #fff;
    border: 1px solid;
    border-color: #e5e6e9 #dfe0e4 #d0d1d5;
    border-radius: 3px;
    padding: 15px;
    margin: 0 auto;
    max-width: 480px;
    min-height: 156px;
    box-sizing: border-box;
}



步骤2

使用css background属性设置背景动画，使用css3的gradient属性设置颜色渐变，效果如图所示


HTML

<div class="placeholder-wrapper">
    <div class="placeholder-item">
        <div class="animated-background">
        </div>