纯div+css实现三维立体装饰流动动画效果代码
代码语言：html
所属分类：动画
代码描述：纯div+css实现三维立体装饰流动动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
#btn--yp {
box-sizing: content-box;
position: fixed;
z-index: 9;
bottom: 1em;
right: 1em;
border: solid 1em transparent;
width: 4.625em;
height: 3.25em;
font: 16px/ 1.25 trebuchet ms, sans-serif;
text-indent: 200vw;
text-shadow: none;
filter: grayscale(1) drop-shadow(0 0 1px #e8e0e0);
transition: .5s;
white-space: nowrap;
}
#btn--yp:before {
box-sizing: inherit;
position: absolute;
left: 0;
bottom: 100%;
margin: 1em -.5em;
padding: .5em;
width: 100%;
border-radius: 5px;
background: #e8e0e0;
color: #000;
text-align: center;
text-decoration: none;
text-indent: 0vw;
white-space: normal;
animation: float 1s ease-in-out infinite alternate;
content: attr(data-txt);
}
#btn--yp:hover, #btn--yp:focus {
outline: none;
filter: grayscale(0) drop-shadow(0 0 1px crimson);
}
@keyframes float {
to {
transform: translateY(0.75em);
}
}
body {
display: grid;
overflow: hidden;
margin: 0;
height: 100vh;
perspective-origin: 50% 43%;
perspective: 35em;
background: radial-gradient(circle, #272d4d, #b83564 135%);
}
div {
display: grid;
grid-area: 1/ 1;
transform-style: preserve-3d;
}
@keyframes m {
0% {
transform: rotatey(var(--ay)) translatey(var(--y));
}
}
.cube {
--ri: calc(50vmin/(var(--nc) + 1));
--ay: calc(var(--i)/var(--na)*1turn);
--y: calc((1 - var(--nc))*var(--ri));
transform: rotatey(calc(var(--ay) - .5turn)) translatey(calc(-1*var(--y)));
animation: m 8s linear calc(var(--j)/var(--nc)*-8s) infinite;
}
@keyframes s {
0% {
transform: scale3d(0, 0, 0) var(--oz);
}
}
@keyframes r {
to {
transform: rotatey(1turn) var(--pos);
}
}
.dir {
--oz: translatez(calc(.5/0.8*var(--nc)*var(--ri)));
transform: scale3d(0.8, 0.8, 0.8) var(--oz);
animation: s 4s ease-in-out infinite alternate;
animation-delay: inherit;
}
.dir::before, .dir::after {
--k: 0;
grid-area: 1/ 1;
place-self: center;
padding: var(--ri);
--pos: rotate3d(var(--v), 90deg)
rotatey(calc(var(--k)*.5turn))
translatez(var(--ri));
backface-visibility: hidden;
transform: rotatey(0deg) var(--pos);
background: currentcolor;
animation: r 2s linear infinite;
animation-delay: inherit;
content: "";
}
.dir::after {
--k: 1 ;
}
</style>
</head>
<body >
<style>.cube:nth-child(n + 1) { --i: 0 }.cube:nth-child(n + 25) { --i: 1 }.cube:nth-child(n + 49) { --i: 2 }.cube:nth-child(n + 73) { --i: 3 }.cube:nth-child(n + 97) { --i: 4 }.cube:nth-child(n + 121) { --i: 5 }.cube:nth-child(24n + 1) { --j: 0 }.cube:nth-child(24n + 2) { --j: 1 }.cube:nth-child(24n + 3) { --j: 2 }.cube:nth-child(24n + 4) { --j: 3 }.cube:nth-child(24n + 5) { --j: 4 }.cube:nth-child(24n + 6) { --j: 5 }.cube:nth-child(24n + 7) { --j: 6 }.cube:nth-child(24n + 8) { --j: 7 }.cube:nth-child(24n + 9) { --j: 8 }.cube:nth-child(24n + 10) { --j: 9 }.cube:nth-child(24n + 11) { --j: 10 }.cube:nth-child(24n + 12) { --j: 11 }.cube:nth-child(24n + 13) { --j: 12 }.cube:nth-child(24n + 14) { --j: 13 }.cube:nth-child(24n + 15) { --j: 14 }.cube:nth-child(24n + 16) { --j: 15 }.cube:nth-child(24n + 17) { --j: 16 }.cube:nth-child(24n + 18) { --j: 17 }.cube:nth-child(24n + 19) { --j: 18 }.cube:nth-child(24n + 20) { --j: 19 }.cube:nth-child(24n + 21) { --j: 20 }.cube:nth-child(24n + 22) { --j: 21 }.cube:nth-child(24n + 23) { --j: 22 }.cube:nth-child(24n + 24) { --j: 23 }.dir:nth-child(1) { color: #83b8aa; --v: 1,0,0 }.dir:nth-child(2) { color: #ff6a5a; --v: 0,1,0 }.dir:nth-child(3) { color: #ffb350; --v: 0,0,1 }
</style>
<div class="a3d" style="--na: 6; --nc: 24">
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></div>
<div class="dir"></div>
</div>
<div class="cube">
<div class="dir"></div>
<div class="dir"></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