返回 导航

HTML5 / CSS3

hangge.com

CSS3 - 纯CSS实现的loading加载动画效果：中（补充2套动画库）

作者：hangge | 2017-08-20 08:10

三、loading.css

这套动画样式出处不详，但有些前面介绍的两个样式库中没有的动画效果，可以作为补充使用。

1，运行效果

circle
circle-side
arrow-circle
ball-scale
ball-rotate
ball-pulse
ball-circle
rectangle
heart
jumping
satellite

2，样例代码 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="loading.css" type="text/css">
    <style>
      #container {
        margin-left:30px;
        font-size: 12px;
        color: #c0c0c0;
        display: flex;
        flex-wrap: wrap;
        width: 700px;
        background-color: #17607D;
        padding-top:20px;
      }
      .vbox{
        display: flex;
        flex-direction: column;
        align-items: center;
        width:140px;
        height:140px;
      }
      .vbox > div{
        margin-top: 30px;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div class="vbox">
        circle
        <div data-loader='circle'></div>
      </div>
      <div class="vbox">
        circle-side
        <div data-loader='circle-side'></div>
      </div>
      <div class="vbox">
        arrow-circle
        <div data-loader='arrow-circle'></div>
      </div>
      <div class="vbox">
        ball-scale
        <div data-loader='ball-scale'></div>
      </div>
      <div class="vbox">
        ball-rotate
        <div data-loader='ball-rotate'></div>
      </div>
      <div class="vbox">
        ball-pulse
        <div data-loader='ball-pulse'></div>
      </div>
      <div class="vbox">
        ball-circle
        <div data-loader='ball-circle'></div>
      </div>
      <div class="vbox">
        rectangle
        <div data-loader='rectangle'></div>
      </div>
      <div class="vbox">
        heart
        <div data-loader='heart'></div>
      </div>
      <div class="vbox">
        jumping
        <div data-loader='jumping'></div>
      </div>
      <div class="vbox">
        satellite
        <div data-loader='satellite'></div>
      </div>
    </div>
  </body>
</html>
css下载：loading.css


四、zzsc.css

这套动画样式的特点是通过绘制一些拟物图标（仪表盘、时钟等），来表示加载等待的过程。

1，运行效果

timer
typing_loader
location_indicator
dashboard
battery
magnifier
help
cloud
eye
coffee_cup
square
circle

2，样例代码 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="zzsc.css" type="text/css">
    <style>
      #container {
        margin-left:30px;
        font-size: 12px;
        color: #c0c0c0;
        display: flex;
        flex-wrap: wrap;
        width: 700px;
        background-color: #17607D;
        padding-top:20px;
      }
      .vbox{
        display: flex;
        flex-direction: column;
        text-align: center;
        width:135px;
        height:135px;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div class="vbox">
        timer
        <div class="timer"></div>
      </div>
      <div class="vbox">
        typing_loader
        <div class="typing_loader"></div>
      </div>
      <div class="vbox">
        location_indicator
        <div class="location_indicator"></div>
      </div>
      <div class="vbox">
        dashboard
        <div class="dashboard"></div>
      </div>
      <div class="vbox">
        battery
        <div class="battery"></div>
      </div>
      <div class="vbox">
        magnifier
        <div class="magnifier"></div>
      </div>
      <div class="vbox">
        help
        <div class="help"></div>
      </div>
      <div class="vbox">
        cloud
        <div class="cloud"></div>
      </div>
      <div class="vbox">
        eye
        <div class="eye"></div>
      </div>
      <div class="vbox">
        coffee_cup
        <div class="coffee_cup"></div>
      </div>
      <div class="vbox">
        square
        <div class="square"></div>
      </div>
      <div class="vbox">
        circle
        <div class="circle"></div>
      </div>
    </div>
  </body>
</html>
css下载：zzsc.css
评论

全部评论（0）

回到顶部