div+css实现立体攀爬堆积的立方体盒子动画效果代码
代码语言：html
所属分类：动画
代码描述：div+css实现立体攀爬堆积的立方体盒子动画效果代码
代码标签： div css 立体 攀爬 堆积 立方体 盒子 动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
*, *::before, *::after {
padding: 0;
margin: 0 auto;
box-sizing: border-box;
}
body {
background-color: #000;
min-height: 100vh;
display: grid;
place-items: center;
perspective: 800px;
overflow: hidden;
}
body * {
transform-style: preserve-3d;
}
.scene {
position: relative;
transform: rotateX(-30deg) rotateY(-60deg);
font-size: 60px;
-webkit-animation: sceneRotate 60s infinite linear;
animation: sceneRotate 60s infinite linear;
}
@-webkit-keyframes sceneRotate {
from {
transform: rotateX(-30deg) rotateY(0deg);
}
to {
transform: rotateX(-30deg) rotateY(360deg);
}
}
@keyframes sceneRotate {
from {
transform: rotateX(-30deg) rotateY(0deg);
}
to {
transform: rotateX(-30deg) rotateY(360deg);
}
}
.column {
position: absolute;
transform: rotateY(var(--ry)) translateX(2.8em);
}
.column:nth-child(1) {
--ry: 0deg;
}
.column:nth-child(1) .box {
-webkit-animation: boxRotate0 12s var(--delay) infinite ease-in-out, boxTop0 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
animation: boxRotate0 12s var(--delay) infinite ease-in-out, boxTop0 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
}
@-webkit-keyframes boxRotate0 {
0%, 32.4% {
rotate: 0.25turn;
}
39.52%, 41.74%, 44.04%, 47.82%, 51.76% {
rotate: -0.25turn;
-webkit-animation-timing-function: step-end;
animation-timing-function: step-end;
}
39.52%, 41.74%, 44.04%, 47.82%, 51.76% {
rotate: 0turn;
}
56.2%, 100% {
rotate: -0.5turn;
}
}
@keyframes boxRotate0 {
0%, 32.4% {
rotate: 0.25turn;
}
39.52%, 41.74%, 44.04%, 47.82%, 51.76% {
rotate: -0.25turn;
-webkit-animation-timing-function: step-end;
animation-timing-function: step-end;
}
39.52%, 41.74%, 44.04%, 47.82%, 51.76% {
rotate: 0turn;
}
56.2%, 100% {
rotate: -0.5turn;
}
}
@-webkit-keyframes boxTop0 {
0%, 32.4% {
top: 0;
}
39.52% {
top: -1em;
}
41.74% {
top: -2em;
}
44.04% {
top: -3em;
}
47.82% {
top: -4em;
}
51.76% {
top: -5em;
}
}
@keyframes boxTop0 {
0%, 32.4% {
top: 0;
}
39.52% {
top: -1em;
}
41.74% {
top: -2em;
}
44.04% {
top: -3em;
}
47.82% {
top: -4em;
}
51.76% {
top: -5em;
}
}
.column:nth-child(2) {
--ry: 30deg;
}
.column:nth-child(2) .box {
-webkit-animation: boxRotate1 12s var(--delay) infinite ease-in-out, boxTop1 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
animation: boxRotate1 12s var(--delay) infinite ease-in-out, boxTop1 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
}
@-webkit-keyframes boxRotate1 {
0%, 29.6% {
rotate: 0.25turn;
}
33.8%, 36.52%, 40.22%, 42.42%, 44.88% {
rotate: -0.25turn;
-webkit-animation-timing-function: step-end;
animation-timing-function: step-end;
}
33.8%, 36.52%, 40.22%, 42.42%, 44.88% {
rotate: 0turn;
}
51.92%, 100% {
rotate: -0.5turn;
}
}
@keyframes boxRotate1 {
0%, 29.6% {
rotate: 0.25turn;
}
33.8%, 36.52%, 40.22%, 42.42%, 44.88% {
rotate: -0.25turn;
-webkit-animation-timing-function: step-end;
animation-timing-function: step-end;
}
33.8%, 36.52%, 40.22%, 42.42%, 44.88% {
rotate: 0turn;
}
51.92%, 100% {
rotate: -0.5turn;
}
}
@-webkit-keyframes boxTop1 {
0%, 29.6% {
top: 0;
}
33.8% {
top: -1em;
}
36.52% {
top: -2em;
}
40.22% {
top: -3em;
}
42.42% {
top: -4em;
}
44.88% {
top: -5em;
}
}
@keyframes boxTop1 {
0%, 29.6% {
top: 0;
}
33.8% {
top: -1em;
}
36.52% {
top: -2em;
}
40.22% {
top: -3em;
}
42.42% {
top: -4em;
}
44.88% {
top: -5em;
}
}
.column:nth-child(3) {
--ry: 60deg;
}
.column:nth-child(3) .box {
-webkit-animation: boxRotate2 12s var(--delay) infinite ease-in-out, boxTop2 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
animation: boxRotate2 12s var(--delay) infinite ease-in-out, boxTop2 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
}
@-webkit-keyframes boxRotate2 {
0%, 8% {
rotate: 0.25turn;
}
12.32%, 14.68%, 18.62%, 22.04%, 24.66% {
rotate: -0.25turn;
-webkit-animation-timing-function: step-end;
animation-timing-function: step-end;
}
12.32%, 14.68%, 18.62%, 22.04%, 24.66% {
rotate: 0turn;
}
29.5%, 100% {
rotate: -0.5turn;
}
}
@keyframes boxRotate2 {
0%, 8% {
rotate: 0.25turn;
}
12.32%, 14.68%, 18.62%, 22.04%, 24.66% {
rotate: -0.25turn;
-webkit-animation-timing-function: step-end;
animation-timing-function: step-end;
}
12.32%, 14.68%, 18.62%, 22.04%, 24.66% {
rotate: 0turn;
}
29.5%, 100% {
rotate: -0.5turn;
}
}
@-webkit-keyframes boxTop2 {
0%, 8% {
top: 0;
}
12.32% {
top: -1em;
}
14.68% {
top: -2em;
}
18.62% {
top: -3em;
}
22.04% {
top: -4em;
}
24.66% {
top: -5em;
}
}
@keyframes boxTop2 {
0%, 8% {
top: 0;
}
12.32% {
top: -1em;
}
14.68% {
top: -2em;
}
18.62% {
top: -3em;
}
22.04% {
top: -4em;
}
24.66% {
top: -5em;
}
}
.column:nth-child(4) {
--ry: 90deg;
}
.column:nth-child(4) .box {
-webkit-animation: boxRotate3 12s var(--delay) infinite ease-in-out, boxTop3 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
animation: boxRotate3 12s var(--delay) infinite ease-in-out, boxTop3 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
}
@-webkit-keyframes boxRotate3 {
0%, 4% {
rotate: 0.25turn;
}
8.28%, 11.16%, 13.3%, 16.18%, 18.2% {
rotate: -0.25turn;
-webkit-animation-timing-function: step-end;
animation-timing-function: step-end;
}
8.28%, 11.16%, 13.3%, 16.18%, 18.2% {
rotate: 0turn;
}
22.64%, 100% {
rotate: -0.5turn;
}
}
@keyframes boxRotate3 {
0%, 4% {
rotate: 0.25turn;
}
8.28%, 11.16%, 13.3%, 16.18%, 18.2% {
rotate: -0.25turn;
-webkit-animation-timing-function: step-end;
animation-timing-function: step-end;
}
8.28%, 11.16%, 13.3%, 16.18%, 18.2% {
rotate: 0turn;
}
22.64%, 100% {
rotate: -0.5turn;
}
}
@-webkit-keyframes boxTop3 {
0%, 4% {
top: 0;
}
8.28% {
top: -1em;
}
11.16% {
top: -2em;
}
13.3% {
top: -3em;
}
16.18% {
top: -4em;
}
18.2% {
top: -5em;
}
}
@keyframes boxTop3 {
0%, 4% {
top: 0;
}
8.28% {
top: -1em;
}
11.16% {
top: -2em;
}
13.3% {
top: -3em;
}
16.18% {
top: -4em;
}
18.2% {
top: -5em;
}
}
.column:nth-child(5) {
--ry: 120deg;
}
.column:nth-child(5) .box {
-webkit-animation: boxRotate4 12s var(--delay) infinite ease-in-out, boxTop4 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
animation: boxRotate4 12s var(--delay) infinite ease-in-out, boxTop4 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
}
@-webkit-keyframes boxRotate4 {
0%, 10.4% {
rotate: 0.25turn;
}
17.48%, 20.94%, 23.46%, 26.36%, 30.14% {
rotate: -0.25turn;
-webkit-animation-timing-function: step-end;
animation-timing-function: step-end;
}
17.48%, 20.94%, 23.46%, 26.36%, 30.14% {
rotate: 0turn;
}
35.7%, 100% {
rotate: -0.5turn;
}
}
@keyframes boxRotate4 {
0%, 10.4% {
rotate: 0.25turn;
}
17.48%, 20.94%, 23.46%, 26.36%, 30.14% {
rotate: -0.25turn;
-webkit-animation-timing-function: step-end;
animation-timing-function: step-end;
}
17.48%, 20.94%, 23.46%, 26.36%, 30.14% {
rotate: 0turn;
}
35.7%, 100% {
rotate: -0.5turn;
}
}
@-webkit-keyframes boxTop4 {
0%, 10.4% {
top: 0;
}
17.48% {
top: -1em;
}
20.94% {
top: -2em;
}
23.46% {
top: -3em;
}
26.36% {
top: -4em;
}
30.14% {
top: -5em;
}
}
@keyframes boxTop4 {
0%, 10.4% {
top: 0;
}
17.48% {
top: -1em;
}
20.94% {
top: -2em;
}
23.46% {
top: -3em;
}
26.36% {
top: -4em;
}
30.14% {
top: -5em;
}
}
.column:nth-child(6) {
--ry: 150deg;
}
.column:nth-child(6) .box {
-webkit-animation: boxRotate5 12s var(--delay) infinite ease-in-out, boxTop5 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
animation: boxRotate5 12s var(--delay) infinite ease-in-out, boxTop5 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
}
@-webkit-keyframes boxRotate5 {
0%, 6.8% {
rotate: 0.25turn;
}
12.8%, 16.3%, 18.66%, 22.16%, 24.54% {
rotate: -0.25turn;
-webkit-animation-timing-function: step-end;
animation-timing-function: step-end;
}
12.8%, 16.3%, 18.66%, 22.16%, 24.54% {
rotate: 0turn;
}
31.22%, 100% {
rotate: -0.5turn;
}
}
@keyframes boxRotate5 {
0%, 6.8% {
rotate: 0.25turn;
}
12.8%, 16.3%, 18.66%, 22.16%, 24.54% {
rotate: -0.25turn;
-webkit-animation-timing-function: step-end;
animation-timing-function: step-end;
}
12.8%, 16.3%, 18.66%, 22.16%, 24.54% {
rotate: 0turn;
}
31.22%, 100% {
rotate: -0.5turn;
}
}
@-webkit-keyframes boxTop5 {
0%, 6.8% {
top: 0;
}
12.8% {
top: -1em;
}
16.3% {
top: -2em;
}
18.66% {
top: -3em;
}
22.16% {
top: -4em;
}
24.54% {
top: -5em;
}
}
@keyframes boxTop5 {
0%, 6.8% {
top: 0;
}
12.8% {
top: -1em;
}
16.3% {
top: -2em;
}
18.66% {
top: -3em;
}
22.16% {
top: -4em;
}
24.54% {
top: -5em;
}
}
.column:nth-child(7) {
--ry: 180deg;
}
.column:nth-child(7) .box {
-webkit-animation: boxRotate6 12s var(--delay) infinite ease-in-out, boxTop6 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
animation: boxRotate6 12s var(--delay) infinite ease-in-out, boxTop6 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
}
@-webkit-keyframes boxRotate6 {
0%, 14.4% {
rotate: 0.25turn;
}
21.24%, 25.02%, 27.38%, 30.98%, 33.4% {
rotate: -0.25turn;
-webkit-animation-timing-function: step-end;
animation-timing-function: step-end;
}
21.24%, 25.02%, 27.38%, 30.98%, 33.4% {
rotate: 0turn;
}
40.64%, 100% {
rotate: -0.5turn;
}
}
@keyframes boxRotate6 {
0%, 14.4% {
rotate: 0.25turn;
}
21.24%, 25.02%, 27.38%, 30.98%, 33.4% {
rotate: -0.25turn;
-webkit-animation-timing-function: step-end;
animation-timing-function: step-end;
}
21.24%, 25.02%, 27.38%, 30.98%, 33.4% {
rotate: 0turn;
}
40.64%, 100% {
rotate: -0.5turn;
}
}
@-webkit-keyframes boxTop6 {
0%, 14.4% {
top: 0;
}
21.24% {
top: -1em;
}
25.02% {
top: -2em;
}
27.38% {
top: -3em;
}
30.98% {
top: -4em;
}
33.4% {
top: -5em;
}
}
@keyframes boxTop6 {
0%, 14.4% {
top: 0;
}
21.24% {
top: -1em;
}
25.02% {
top: -2em;
}
27.38% {
top: -3em;
}
30.98% {
top: -4em;
}
33.4% {
top: -5em;
}
}
.column:nth-child(8) {
--ry: 210deg;
}
.column:nth-child(8) .box {
-webkit-animation: boxRotate7 12s var(--delay) infinite ease-in-out, boxTop7 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
animation: boxRotate7 12s var(--delay) infinite ease-in-out, boxTop7 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
}
@-webkit-keyframes boxRotate7 {
0%, 2% {
rotate: 0.25turn;
}
6.2%, 9.78%, 11.88%, 14.8%, 18.46% {
rotate: -0.25turn;
-webkit-animation-timing-function: step-end;
animation-timing-function: step-end;
}
6.2%, 9.78%, 11.88%, 14.8%, 18.46% {
rotate: 0turn;
}
25.98%, 100% {
rotate: -0.5turn;
}
}
@keyframes boxRotate7 {
0%, 2% {
rotate: 0.25turn;
}
6.2%, 9.78%, 11.88%, 14.8%, 18.46% {
rotate: -0.25turn;
-webkit-animation-timing-function: step-end;
animation-timing-function: step-end;
}
6.2%, 9.78%, 11.88%, 14.8%, 18.46% {
rotate: 0turn;
}
25.98%, 100% {
rotate: -0.5turn;
}
}
@-webkit-keyframes boxTop7 {
0%, 2% {
top: 0;
}
6.2% {
top: -1em;
}
9.78% {
top: -2em;
}
11.88% {
top: -3em;
}
14.8% {
top: -4em;
}
18.46% {
top: -5em;
}
}
@keyframes boxTop7 {
0%, 2% {
top: 0;
}
6.2% {
top: -1em;
}
9.78% {
top: -2em;
}
11.88% {
top: -3em;
}
14.8% {
top: -4em;
}
18.46% {
top: -5em;
}
}
.column:nth-child(9) {
--ry: 240deg;
}
.column:nth-child(9) .box {
-webkit-animation: boxRotate8 12s var(--delay) infinite ease-in-out, boxTop8 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
animation: boxRotate8 12s var(--delay) infinite ease-in-out, boxTop8 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
}
@-webkit-keyframes boxRotate8 {
0%, 26.8% {
rotate: 0.25turn;
}
32.84%, 34.94%, 38.64%, 41.94%, 45.84% {
rotate: -0.25turn;
-webkit-animation-timing-function: step-end;
animation-timing-function: step-end;
}
32.84%, 34.94%, 38.64%, 41.94%, 45.84% {
rotate: 0turn;
}
50.36%, 100% {
rotate: -0.5turn;
}
}
@keyframes boxRotate8 {
0%, 26.8% {
rotate: 0.25turn;
}
32.84%, 34.94%, 38.64%, 41.94%, 45.84% {
rotate: -0.25turn;
-webkit-animation-timing-function: step-end;
animation-timing-function: step-end;
}
32.84%, 34.94%, 38.64%, 41.94%, 45.84% {
rotate: 0turn;
}
50.36%, 100% {
rotate: -0.5turn;
}
}
@-webkit-keyframes boxTop8 {
0%, 26.8% {
top: 0;
}
32.84% {
top: -1em;
}
34.94% {
top: -2em;
}
38.64% {
top: -3em;
}
41.94% {
top: -4em;
}
45.84% {
top: -5em;
}
}
@keyframes boxTop8 {
0%, 26.8% {
top: 0;
}
32.84% {
top: -1em;
}
34.94% {
top: -2em;
}
38.64% {
top: -3em;
}
41.94% {
top: -4em;
}
45.84% {
top: -5em;
}
}
.column:nth-child(10) {
--ry: 270deg;
}
.column:nth-child(10) .box {
-webkit-animation: boxRotate9 12s var(--delay) infinite ease-in-out, boxTop9 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
animation: boxRotate9 12s var(--delay) infinite ease-in-out, boxTop9 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
}
@-webkit-keyframes boxRotate9 {
0%, 37.2% {
rotate: 0.25turn;
}
44.44%, 46.7%, 50.26%, 52.32%, 55.76% {
rotate: -0.25turn;
-webkit-animation-timing-function: step-end;
animation-timing-function: step-end;
}
44.44%, 46.7%, 50.26%, 52.32%, 55.76% {
rotate: 0turn;
}
61.56%, 100% {
rotate: -0.5turn;
}
}
@keyframes boxRotate9 {
0%, 37.2% {
rotate: 0.25turn;
}
44.44%, 46.7%, 50.26%, 52.32%, 55.76% {
rotate: -0.25turn;
-webkit-animation-timing-function: step-end;
animation-timing-function: step-end;
}
44.44%, 46.7%, 50.26%, 52.32%, 55.76% {
rotate: 0turn;
}
61.56%, 100% {
rotate: -0.5turn;
}
}
@-webkit-keyframes boxTop9 {
0%, 37.2% {
top: 0;
}
44.44% {
top: -1em;
}
46.7% {
top: -2em;
}
50.26% {
top: -3em;
}
52.32% {
top: -4em;
}
55.76% {
top: -5em;
}
}
@keyframes boxTop9 {
0%, 37.2% {
top: 0;
}
44.44% {
top: -1em;
}
46.7% {
top: -2em;
}
50.26% {
top: -3em;
}
52.32% {
top: -4em;
}
55.76% {
top: -5em;
}
}
.column:nth-child(11) {
--ry: 300deg;
}
.column:nth-child(11) .box {
-webkit-animation: boxRotate10 12s var(--delay) infinite ease-in-out, boxTop10 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0