简单的CSS3网页内容placeholder占位特效

当前位置:主页 > CSS3库 > UI界面设计 > 简单的CSS3网页内容placeholder占位特效
简单的CSS3网页内容placeholder占位特效
分享:

    插件介绍

    mocka是一款简单的CSS3网页内容placeholder占位特效。它可以在网页加载的过程中,在显示内容的地方显示预定的CSS3动画,增强用户体验。

    浏览器兼容性

    浏览器兼容性
    时间:2017-05-29
    阅读:
麦子学院
简要教程

mocka是一款简单的CSS3网页内容placeholder占位特效。它可以在网页加载的过程中,在显示内容的地方显示预定的CSS3动画,增强用户体验。

mocka内容占位效果

安装

可以通过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

网友评论