炫酷3D立方体预加载loading特效

PetitQ 其他代码 2019-9-14 1.68K 0 1

这是一款 css3 炫酷 3D 立方体预加载 loading 特效。该特效通过简单的 HTML 元素和 CSS3 代码，构建几个立方体不停运动的动画特效，适用于做页面的 loading 效果。

使用方法

在 HTML 文件中引入下面的文件。

也想出现在这里？联系我们吧

<script src="css/bootstrap.min.js"></script>

HTML 结构

```
<div class="container">
```
```
    <div class="row">
```
```
        <div class="col-md-12">
```
```
            <div class="loader">
```
```
              <div class="box">
```
```
                  <div></div>
```
```
                  <div></div>
```
```
                  <div></div>
```
```
                  <div></div>
```
```
              </div>
```
```
              <div class="box">
```
```
                  <div></div>
```
```
                  <div></div>
```
```
                  <div></div>
```
```
                  <div></div>
```
```
              </div>
```
```
              <div class="box">
```
```
                  <div></div>
```
```
                  <div></div>
```
```
                  <div></div>
```
```
                  <div></div>
```
```
              </div>
```
```
              <div class="box">
```
```
                  <div></div>
```
```
                  <div></div>
```
```
                  <div></div>
```
```
                  <div></div>
```
```
              </div>
```
```
            </div>
```
```
        </div>
```
```
    </div>
```
```
</div>
```

css 样式

```
.loader{
```
```
    --size: 32px;
```
```
    --duration: 800ms;
```
```
    width: 96px;
```
```
    height: 64px;
```
```
    margin: 50px auto;
```
```
    transform-style: preserve-3d;
```
```
    transform-origin: 50% 50%;
```

    transform: rotateX(60deg) rotateZ(45deg) rotateY(0deg) translateZ(0px);

```
    position: relative;
```
```
}
```
```
.loader .box{
```
```
    width:  32px;
```
```
    height: 32px;
```
```
    transform-style: preserve-3d;
```
```
    position: absolute;
```
```
    top: 0;
```
```
    left: 0;
```
```
}
```
```
.loader .box:nth-child(1){
```
```
    transform: translate(100%, 0);
```

    animation: box1 800ms linear infinite;

```
}
```
```
.loader .box:nth-child(2){
```
```
    transform: translate(0, 100%);
```

    animation: box2 800ms linear infinite;

```
}
```
```
.loader .box:nth-child(3){
```
```
    transform: translate(100%, 100%);
```

    animation: box3 800ms linear infinite;

```
}
```
```
.loader .box:nth-child(4){
```
```
    transform: translate(200%, 0);
```

    animation: box4 800ms linear infinite;

```
}
```
```
.loader .box > div{
```

    --translateZ: calc(var(--size) / 2);

```
    --rotateY: 0deg;
```
```
    --rotateX: 0deg;
```
```
    background: #5c8df6;
```
```
    width: 100%;
```
```
    height: 100%;
```

    transform: rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(var(--translateZ));

```
    position: absolute;
```
```
    top: auto;
```
```
    right: auto;
```
```
    bottom: auto;
```
```
    left: auto;
```
```
}
```
```
.loader .box > div:nth-child(1){
```
```
    top: 0;
```
```
    left: 0;
```
```
}
```
```
.loader .box > div:nth-child(2){
```
```
    background: #145af2;
```
```
    right: 0;
```
```
    --rotateY: 90deg;
```
```
}
```
```
.loader .box > div:nth-child(3){
```
```
    background: #447cf5;
```
```
    --rotateX: -90deg;
```
```
}
```
```
.loader .box > div:nth-child(4){
```
```
    background: #dbe3f4;
```
```
    top: 0;
```
```
    left: 0;
```

    --translateZ: calc(var(--size) * 3 * -1);

```
}
```
```
@keyframes box1{
```

    0%, 50%{ transform: translate(100%, 0); }

    100%{ transform: translate(200%, 0); }

```
}
```
```
@keyframes box2{
```

    0%{ transform: translate(0, 100%); }

```
    50%{ transform: translate(0, 0); }
```

    100%{ transform: translate(100%, 0); }

```
}
```
```
@keyframes box3{
```

    0%, 50%{ transform: translate(100%, 100%); }

    100%{ transform: translate(0, 100%); }

```
}
```
```
@keyframes box4{
```

    0%{ transform: translate(200%, 0); }

    50%{ transform: translate(200%, 100%); }

    100%{ transform: translate(100%, 100%); }

```
}
```

炫酷 3D 立方体预加载 loading 特效

已有 420 人购买

永久更新：
演示数据：
提取码：0ps7

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

其他代码

炫酷3D立方体预加载loading特效

使用方法

HTML 结构

css 样式

炫酷 3D 立方体预加载 loading 特效

相关文章

wysiwyg - 富文本编辑器jQuery插件

jQuery点击购买商品飞入购物车动画

简单实用jQuery计时器插件

发表回复取消回复

热销模板

其他代码

使用方法

HTML 结构

css 样式

炫酷 3D 立方体预加载 loading 特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复