css实现三维宇宙魔方变形动画效果代码
代码语言：html
所属分类：三维
代码描述：css实现三维宇宙魔方变形动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
.container {
--c1:hsl(214deg 100% 50%);
--c2:hsl(214deg 100% 30%);
--c3:hsl(214deg 100% 15%);
transform-style: preserve-3d;
animation: s 1s infinite;
}
.maze {
width: 200px;
aspect-ratio: 1/1;
display: grid;
grid-template-columns: repeat(var(--n), 1fr);
grid-auto-rows: 1fr;
transform-style: preserve-3d;
}
.maze:first-child {
transform: translate(-50%,100%) rotate(-90deg) rotateX(90deg) translate(0,-50%);
}
.maze:last-child {
transform: translate(0,-50%)rotate(90deg) rotateY(90deg) translate(50%);
}
.maze > * {
background: var(--c1);
transform: translateZ(0px);
transform-style: preserve-3d;
--d: calc(var(--i) - var(--j));
animation: t 2s calc(var(--d) * 0.2s) infinite;
}
.maze:first-child *{
background: var(--c2);
}
.maze:last-child *{
background: var(--c3);
}
.maze > *::before,
.maze > *::after {
content: "";
bottom: 0;
left: 0;
position: absolute;
}
.maze > *::before {
width: 40px;
top: 0;
transform-origin: left;
background: var(--c2);
transform: rotateY(90deg);
}
.maze:first-child > *::before {
background: var(--c3);
}
.maze:last-child > *::before {
background: var(--c1);
}
.maze > *::after {
height: 40px;
right: 0;
transform-origin: bottom;
background: var(--c3);
transform: rotateX(90deg);
}
.maze:first-child > *::after {
background: var(--c1);
}
.maze:last-child > *::after {
background: var(--c2);
}
@keyframes t {
50% {
transform: translateZ(10px);
}
}
@keyframes s {
0%,70%,100% {transform: translate(0,-30%) rotateX(65deg) rotateZ(-45deg)}
75%,85%,95% {transform: translate(0,-32%) rotateX(65deg) rotateZ(-40deg)}
80%,90% {transform: translate(0,-31%) rotateX(70deg) rotateZ(-45deg)}
}
body {
perspective: 70em;
margin: 0;
background: #000;
min-height: 100vh;
display: grid;
place-content: center;
transform-style:preserve-3d;
}
</style>
</head>
<body >
<div class="container" style="--n: 10">
<div class="maze">
<div style="--i: 0;--j: 0"></div>
<div style="--i: 0;--j: 1"></div>
<div style="--i: 0;--j: 2"></div>
<div style="--i: 0;--j: 3"></div>
<div style="--i: 0;--j: 4"></div>
<div style="--i: 0;--j: 5"></div>
<div style="--i: 0;--j: 6"></div>
<div style="--i: 0;--j: 7"></div>
<div style="--i: 0;--j: 8"></div>
<div style="--i: 0;--j: 9"></div>
<div style="--i: 1;--j: 0"></div>
<div style="--i: 1;--j: 1"></div>
<div style="--i: 1;--j: 2"></div>
<div style="--i: 1;--j: 3"></div>
<div style="--i: 1;--j: 4"></div>
<div style="--i: 1;--j: 5"></div>
<div style="--i: 1;--j: 6"></div>
<div style="--i: 1;--j: 7"></div>
<div style="--i: 1;--j: 8"></div>
<div style="--i: 1;--j: 9"></div>
<div style="--i: 2;--j: 0"></div>
<div style="--i: 2;--j: 1"></div>
<div style="--i: 2;--j: 2"></div>
<div style="--i: 2;--j: 3"></div>
<div style="--i: 2;--j: 4"></div>
<div style="--i: 2;--j: 5"></div>
<div style="--i: 2;--j: 6"></div>
<div style="--i: 2;--j: 7"></div>
<div style="--i: 2;--j: 8"></div>
<div style="--i: 2;--j: 9"></div>
<div style="--i: 3;--j: 0"></div>
<div style="--i: 3;--j: 1"></div>
<div style="--i: 3;--j: 2"></div>
<div style="--i: 3;--j: 3"></div>
<div style="--i: 3;--j: 4"></div>
<div style="--i: 3;--j: 5"></div>
<div style="--i: 3;--j: 6"></div>
<div style="--i: 3;--j: 7"></div>
<div style="--i: 3;--j: 8"></div>
<div style="--i: 3;--j: 9"></div>
<div style="--i: 4;--j: 0"></div>
<div style="--i: 4;--j: 1"></div>
<div style="--i: 4;--j: 2"></div>
<div style="--i: 4;--j: 3"></div>
<div style="--i: 4;--j: 4"></div>
<div style="--i: 4;--j: 5"></div>
<div style="--i: 4;--j: 6"></div>
<div style="--i: 4;--j: 7"></div>
<div style="--i: 4;--j: 8"></div>
<div style="--i: 4;--j: 9"></div>
<div style="--i: 5;--j: 0"></div>
<div style="--i: 5;--j: 1"></div>
<div style="--i: 5;--j: 2"></div>
<div style="--i: 5;--j: 3"></div>
<div style="--i: 5;--j: 4"></div>
<div style="--i: 5;--j: 5"></div>
<div style="--i: 5;--j: 6"></div>
<div style="--i: 5;--j: 7"></div>
<div style="--i: 5;--j: 8"></div>
<div style="--i: 5;--j: 9"></div>
<div style="--i: 6;--j: 0"></div>
<div style="--i: 6;--j: 1"></div>
<div style="--i: 6;--j: 2"></div>
<div style="--i: 6;--j: 3"></div>
<div style="--i: 6;--j: 4"></div>
<div style="--i: 6;--j: 5"></div>
<div style="--i: 6;--j: 6"></div>
<div style="--i: 6;--j: 7"></div>
<div style="--i: 6;--j: 8"></div>
<div style="--i: 6;--j: 9"></div>
<div style="--i: 7;--j: 0"></div>
<div style="--i: 7;--j: 1"></div>
<div style="--i: 7;--j: 2"></div>
<div style="--i: 7;--j: 3"></div>
<div style="--i: 7;--j: 4"></div>
<div style="--i: 7;--j: 5"></div>
<div style="--i: 7;--j: 6"></div>
<div style="--i: 7;--j: 7"></div>
<div style="--i: 7;--j: 8"></div>
<div style="--i: 7;--j: 9"></div>
<div style="--i: 8;--j: 0"></div>
<div style="--i: 8;--j: 1"></div>
<div style="--i: 8;--j: 2"></div>
<div style="--i: 8;--j: 3"></div>
<div style="--i: 8;--j: 4"></div>
<div style="--i: 8;--j: 5"></div>
<div style="--i: 8;--j: 6"></div>
<div style="--i: 8;--j: 7"></div>
<div style="--i: 8;--j: 8"></div>
<div style="--i: 8;--j: 9"></div>
<div style="--i: 9;--j: 0"></div>
<div style="--i: 9;--j: 1"></div>
<div style="--i: 9;--j: 2"></div>
<div style="--i: 9;--j: 3"></div>
<div style="--i: 9;--j: 4"></div>
<div style="--i: 9;--j: 5"></div>
<div style="--i: 9;--j: 6"></div>
<div style="--i: 9;--j: 7"></div>
<div style="--i: 9;--j: 8"></div>
<div style="--i: 9;--j: 9"></div>
</div>
<div class="maze">
<div style="--i: 0;--j: 0"></div>
<div style="--i: 0;--j: 1"></div>
<div style="--i: 0;--j: 2"></div>
<div style="--i: 0;--j: 3"></div>
<div style="--i: 0;--j: 4"></div>
<div style="--i: 0;--j: 5"></div>
<div style="--i: 0;--j: 6"></div>
<div style="--i: 0;--j: 7"></div>
<div style="--i: 0;--j: 8"></div>
<div style="--i: 0;--j: 9"></div>
<div style="--i: 1;--j: 0"></div>
<div style="--i: 1;--j: 1"></div>
<div style="--i: 1;--j: 2"></div>
<div style="--i: 1;--j: 3"></div>
<div style="--i: 1;--j: 4"></div>
<div style="--i: 1;--j: 5"></div>
<div style="--i: 1;--j: 6"></div>
<div style="--i: 1;--j: 7"></div>
<div style="--i: 1;--j: 8"></div>
<div style="--i: 1;--j: 9"></div>
<div style="--i: 2;--j: 0"></div>
<div style="--i: 2;--j: 1"></div>
<div style="--i: 2;--j: 2"></div>
<div style="--i: 2;--j: 3"></div>
<div style="--i: 2;--j: 4"></div>
<div style="--i: 2;--j: 5"></div>
<div style="--i: 2;--j: 6"></div>
<div style="--i: 2;--j: 7"></div>
<div style="--i: 2;--j: 8"></div>
<div style="--i: 2;--j: 9"></div>
<div style="--i: 3;--j: 0"></div>
<div style="--i: 3;--j: 1"></div>
&l.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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