css实现三维跳动的盒子动画效果代码
代码语言：html
所属分类：动画
代码描述：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;
}
html {
font-size: 0.83vw;
}
body {
display: grid;
place-items: center;
min-height: 100vh;
background-image: linear-gradient(#100, #001);
perspective: 60em;
overflow: hidden;
}
body *:not(:empty) {
transform-style: preserve-3d;
}
.scene {
position: relative;
-webkit-animation: sceneRotate 120s infinite linear;
animation: sceneRotate 120s infinite linear;
}
@-webkit-keyframes sceneRotate {
from {
transform: rotateX(-15deg) rotateY(0deg);
}
to {
transform: rotateX(-15deg) rotateY(-360deg);
}
}
@keyframes sceneRotate {
from {
transform: rotateX(-15deg) rotateY(0deg);
}
to {
transform: rotateX(-15deg) rotateY(-360deg);
}
}
.scene * {
position: absolute;
}
.cube_arm {
bottom: -6em;
width: 48em;
height: 2px;
-webkit-animation: ballArmT 120s var(--delay, 0s) infinite ease-in-out, ballArmS 6s var(--delay, 0s) infinite;
animation: ballArmT 120s var(--delay, 0s) infinite ease-in-out, ballArmS 6s var(--delay, 0s) infinite;
transform-origin: bottom left;
}
@-webkit-keyframes ballArmT {
0% {
transform: rotateY(0deg);
}
5% {
transform: rotateY(162deg);
}
10% {
transform: rotateY(324deg);
}
15% {
transform: rotateY(486deg);
}
20% {
transform: rotateY(648deg);
}
25% {
transform: rotateY(810deg);
}
30% {
transform: rotateY(972deg);
}
35% {
transform: rotateY(1134deg);
}
40% {
transform: rotateY(1296deg);
}
45% {
transform: rotateY(1458deg);
}
50% {
transform: rotateY(1620deg);
}
55% {
transform: rotateY(1782deg);
}
60% {
transform: rotateY(1944deg);
}
65% {
transform: rotateY(2106deg);
}
70% {
transform: rotateY(2268deg);
}
75% {
transform: rotateY(2430deg);
}
80% {
transform: rotateY(2592deg);
}
85% {
transform: rotateY(2754deg);
}
90% {
transform: rotateY(2916deg);
}
95% {
transform: rotateY(3078deg);
}
100% {
transform: rotateY(3240deg);
}
}
@keyframes ballArmT {
0% {
transform: rotateY(0deg);
}
5% {
transform: rotateY(162deg);
}
10% {
transform: rotateY(324deg);
}
15% {
transform: rotateY(486deg);
}
20% {
transform: rotateY(648deg);
}
25% {
transform: rotateY(810deg);
}
30% {
transform: rotateY(972deg);
}
35% {
transform: rotateY(1134deg);
}
40% {
transform: rotateY(1296deg);
}
45% {
transform: rotateY(1458deg);
}
50% {
transform: rotateY(1620deg);
}
55% {
transform: rotateY(1782deg);
}
60% {
transform: rotateY(1944deg);
}
65% {
transform: rotateY(2106deg);
}
70% {
transform: rotateY(2268deg);
}
75% {
transform: rotateY(2430deg);
}
80% {
transform: rotateY(2592deg);
}
85% {
transform: rotateY(2754deg);
}
90% {
transform: rotateY(2916deg);
}
95% {
transform: rotateY(3078deg);
}
100% {
transform: rotateY(3240deg);
}
}
@-webkit-keyframes ballArmS {
0%, 100% {
width: 24em;
height: 0;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
width: 9.3em;
height: 24em;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
@keyframes ballArmS {
0%, 100% {
width: 24em;
height: 0;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
width: 9.3em;
height: 24em;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
.cube_arm:nth-child(1) {
--delay: 0s;
--hue: 0;
}
.cube_arm:nth-child(2) {
--delay: -7.0588235294s;
--hue: 21.1764705882;
}
.cube_arm:nth-child(3) {
--delay: -14.1176470588s;
--hue: 42.3529411765;
}
.cube_arm:nth-child(4) {
--delay: -21.1764705882s;
--hue: 63.5294117647;
}
.cube_arm:nth-child(5) {
--delay: -28.2352941176s;
--hue: 84.7058823529;
}
.cube_arm:nth-child(6) {
--delay: -35.2941176471s;
--hue: 105.8823529412;
}
.cube_arm:nth-child(7) {
--delay: -42.3529411765s;
--hue: 127.0588235294;
}
.cube_arm:nth-child(8) {
--delay: -49.4117647059s;
--hue: 148.2352941176;
}
.cube_arm:nth-child(9) {
--delay: -56.4705882353s;
--hue: 169.4117647059;
}
.cube_arm:nth-child(10) {
--delay: -63.5294117647s;
--hue: 190.5882352941;
}
.cube_arm:nth-child(11) {
--delay: -70.5882352941s;
--hue: 211.7647058824;
}
.cube_arm:nth-child(12) {
--delay: -77.6470588235s;
--hue: 232.9411764706;
}
.cube_arm:nth-child(13) {
--delay: -84.7058823529s;
--hue: 254.1176470588;
}
.cube_arm:nth-child(14) {
--delay: -91.7647058824s;
--hue: 275.2941176471;
}
.cube_arm:nth-child(15) {
--delay: -98.8235294118s;
--hue: 296.4705882353;
}
.cube_arm:nth-child(16) {
--delay: -105.8823529412s;
--hue: 317.6470588235;
}
.cube_arm:nth-child(17) {
--delay: -112.9411764706s;
--hue: 338.8235294118;
}
.cube {
left: 100%;
top: 0;
-webkit-animation: cube 6s var(--delay, 0s) infinite ease-in-out;
animation: cube 6s var(--delay, 0s) infinite ease-in-out;
}
@-webkit-keyframes cube {
from {
transform: rotateX(0deg) rotateY(0deg) rotateZ(-15deg);
}
to {
transform: rotateX(360deg) rotateY(720deg) rotateZ(-15deg);
}
}
@keyframes cube {
from {
transform: rotateX(0deg) rotateY(0deg) rotateZ(-15deg);
}
to {
transform: rotateX(360deg) rotateY(720deg) rotateZ(-15deg);
}
}
.cube > div {
left: -1em;
top: -1em;
width: 2em;
height: 2em;
background-color: hsla(var(--hue, 0), 80%, 70%, 0.5);
background-image: repeating-linear-gradient(45deg, #fff1 0 3px, #fff0 0 6px);
box-shadow: 0 0 1em #0007 inset;
}
.cube > div:nth-child(1) {
transform: rotateY(0deg) translateZ(1em);
}
.cube > div:nth-child(2) {
transform: rotateY(90deg) translateZ(1em);
}
.cube > div:nth-child(3) {
transform: rotateY(180deg) translateZ(1em);
}
.cube > div:nth-child(4) {
transform: rotateY(270deg) translateZ(1em);
}
.cube > div:nth-child(5) {
transform: rotateX(90deg) translateZ(1em);
}
.cube > div:nth-child(6) {
transform: rotateX(270deg) translateZ(1em);
}
.panel {
left: -4em;
top: 4em;
width: 8em;
height: 6em;
border-radius: 3em;
background-image: repeating-linear-gradient(45deg, #fff2 0 3px, #fff0 0 6px), radial-gradient(#0000, #0005);
transform: rotateX(90deg) rotateZ(var(--panelAngle, 0deg)) translateX(24em) rotateY(-15deg);
-webkit-animation: panelT 7.0588235294s var(--delay, 0s) infinite linear, panelHue 120s var(--delay, 0s) infinite step-end;
animation: panelT 7.0588235294s var(--delay, 0s) infinite linear, panelHue 120s var(--delay, 0s) infinite step-end;
}
@-webkit-keyframes panelT {
0% {
transform: rotateX(90deg) rotateZ(var(--panelAngle)) rotateY(0deg) translateX(24.3em) rotateY(-15deg) translateZ(0em);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
8% {
transform: rotateX(90deg) rotateZ(var(--panelAngle)) rotateY(0deg) translateX(23.8em) rotateY(-15deg) translateZ(2em);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
48% {
transform: rotateX(90deg) rotateZ(var(--panelAngle)) rotateY(10deg) translateX(23.8em) rotateY(-15deg) translateZ(0em);
}
58% {
transform: rotateX(90deg) rotateZ(var(--panelAngle)) rotateY(10deg) translateX(23.8em) rotateY(-15deg) rotateZ(-180deg) translateZ(0em);
}
98.1% {
transform: rotateX(90deg) rotateZ(var(--panelAngle)) rotateY(0deg) translateX(23.8em) rotateY(-15deg) rotateZ(-180deg) translateZ(2em);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
100% {
transform: rotateX(90deg) rotateZ(var(--panelAngle)) rotateY(0deg) translateX(24.3em) rotateY(-15deg) rotateZ(-180deg) translateZ(0em);
}
0% {
background-color: hsl(var(--hue, 0), 40%, 70%);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50%, 100% {
background-color: hsl(var(--hue, 0), 0%, 70%);
}
}
@keyframes panelT {
0% {
transform: rotateX(90deg) rotateZ(var(--panelAngle)) rotateY(0deg) translateX(24.3em) rotateY(-15deg) translateZ(0em);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
8% {
transform: rotateX(90deg) rotateZ(var(--panelAngle)) rotateY(0deg) translateX(23.8em) rotateY(-15deg) translateZ(2em);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
48% {
transform: rotateX(90deg) rotateZ(var(--panelAngle)) rotateY(10deg) translateX(23.8em) rotateY(-15deg) translateZ(0em);
}
58% {
transform: rotateX(90deg) rotateZ(var(--panelAngle)) rotateY(10deg) translateX(23.8em) rotateY(-15deg) rotateZ(-180deg) translateZ(0em);
}
98.1% {
transform: rotateX(90deg) rotateZ(var(--panelAngle)) rotateY(0deg) translateX(23.8em) rotateY(-15deg) rotateZ(-180deg) translateZ(2em);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
100% {
transform: rotateX(90deg) rotateZ(var(--panelAngle)) rotateY(0deg) translateX(24.3em) rotateY(-15deg) rotateZ(-180deg) translateZ(0em);
}
0% {
background-color: hsl(var(--hue, 0), 40%, 70%);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50%, 100% {
background-color: hsl(var(--hue, 0), 0%, 70%);
}
}
@-webkit-keyframes panelHue {
0% {
--hue: 0;
}
5.8823529412% {
--hue: -21.1764705882;
}
11.7647058824% {
--hue: -42.3529411765;
}
17.6470588235% {
--hue: -63.5294117647;
}
23.5294117647% {
--hue: -84.7058823529;
}
29.4117647059% {
--hue: -105.8823529412;
}
35.2941176471% {
--hue: -127.0588235294;
}
41.1764705882% {
--hue: -148.2352941176;
}
47.0588235294% {
--hue: -169.4117647059;
}
52.9411764706% {
--hue: -190.5882352941;
}
58.8235294118% {
--hue: -211.7647058824;
}
64.7058823529% {
--hue: -232.9411764706;
}
70.5882352941% {
--hue: -254.1176470588;
}
76.4705882353% {
--hue: -275.2941176471;
}
82.3529411765% {
--hue: -296.4705882353;
}
88.2352941176% {
--hue: -317.6470588235;
}
94.1176470588% {
--hue: -338.8235294118;
}
100% {
--hue: -360;
}
}
@keyframes panelHue {
0% {
--hue: 0;
}
5.8823529412% {
--hue: -21.1764705882;
}
11.7647058824% {
--hue: -42.3529411765;
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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