头像

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

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

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

程序员,你不是一个人;网站开发QQ群:642228541,在线充值,或联系QQ321037704直接充值

查看演示 下载资源: 5 下载资源 下载积分: 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 525945990

1 2