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

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

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

使用方法

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

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

HTML结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<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样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
.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%); }
}
温馨提示:此处内容需要评论本文后才能查看。
2

发表评论