纯CSS多层长方体旋转加载loading动画【原创

来源:https://www.sucaihuo.com/js/3088.html 2017-09-25 23:00浏览(993) 收藏

一款纯CSS多层长方体旋转加载loading动画,一共有5个长方体叠加在一起,并围绕他们的中心轴顺时针方向旋转运动片刻便停止,然后无限循环重复此动作。
纯CSS多层长方体旋转加载loading动画
分类:css3 > transform 难易:初级
查看演示 下载资源: 6 下载资源 下载积分: 10 积分

页面的head部分,需引入页面的样式文件,代码如下:

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分,需设置好每个长方体对应的容器,代码如下:

<div class="stage">
  <div class="boxes">
    <div class="box">
      <div class="box-wrapper">
        <div class="front"></div>
        <div class="back"></div>
        <div class="top"></div>
        <div class="bottom"></div>
        <div class="left"></div>
        <div class="right"></div>
      </div>
    </div>
    <div class="box">
      <div class="box-wrapper">
        <div class="front"></div>
        <div class="back"></div>
        <div class="top"></div>
        <div class="bottom"></div>
        <div class="left"></div>
        <div class="right"></div>
      </div>
    </div>
    <div class="box">
      <div class="box-wrapper">
        <div class="front"></div>
        <div class="back"></div>
        <div class="top"></div>
        <div class="bottom"></div>
        <div class="left"></div>
        <div class="right"></div>
      </div>
    </div>
    <div class="box">
      <div class="box-wrapper">
        <div class="front"></div>
        <div class="back"></div>
        <div class="top"></div>
        <div class="bottom"></div>
        <div class="left"></div>
        <div class="right"></div>
      </div>
    </div>
    <div class="box">
      <div class="box-wrapper">
        <div class="front"></div>
        <div class="back"></div>
        <div class="top"></div>
        <div class="bottom"></div>
        <div class="left"></div>
        <div class="right"></div>
      </div>
    </div>
  </div>
</div>
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/js/3088.html
评论1
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 3007547952

  • 头像 沙发
    10-12 15:45
    q***r
    有用,好玩
1 2