html5 css3 3d建模视频,HTML5 CSS3 3D 柱状体动画

CSS

语言：

CSSSCSS

确定

html {

overflow: hidden;

}

body {

background: #1f0036;

}

div,

:after {

position: absolute;

}

div {

transform-style: preserve-3d;

}

.assembly {

top: 50%;

left: 50%;

transform: rotateX(55deg) rotate(-45deg) translateZ(-5em) scale3d(0.5, 0.5, 0.5);

}

.mov {

animation: mov 1.75s linear infinite;

}

.bar {

animation: inherit;

animation-timing-function: ease-out;

}

.bar:nth-child(1) {

z-index: -24;

margin: -12em 12em;

animation-name: mov1;

}

@keyframes mov1 {

0%, 10% {

transform: none;

}

19.6875%,

100% {

transform: translateZ(10em);

}

}

.bar:nth-child(2) {

z-index: -18;

margin: -6em 12em;

animation-name: mov2;

}

@keyframes mov2 {

0%, 14.6875% {

transform: none;

}

24.375%,

100% {

transform: translateZ(10em);

}

}

.bar:nth-child(3) {

z-index: -13;

margin: 0em 12em;

animation-name: mov3;

}

@keyframes mov3 {

0%, 19.375% {

transform: none;

}

29.0625%,

100% {

transform: translateZ(10em);

}

}

.bar:nth-child(4) {

z-index: -7;

margin: 6em 12em;

animation-name: mov4;

}

@keyframes mov4 {

0%, 24.0625% {

transform: none;

}

33.75%,

100% {

transform: translateZ(10em);

}

}

.bar:nth-child(5) {

z-index: 0;

margin: 12em 12em;

animation-name: mov5;

}

@keyframes mov5 {

0%, 28.75% {

transform: none;

}

38.4375%,

100% {

transform: translateZ(10em);

}

}

.bar:nth-child(6) {

z-index: 6;

margin: 12em 6em;

animation-name: mov6;

}

@keyframes mov6 {

0%, 33.4375% {

transform: none;

}

43.125%,

100% {

transform: translateZ(10em);

}

}

.bar:nth-child(7) {

z-index: 12;

margin: 12em 0em;

animation-name: mov7;

}

@keyframes mov7 {

0%, 38.125% {

transform: none;

}

47.8125%,

100% {

transform: translateZ(10em);

}

}

.bar:nth-child(8) {

z-index: 18;

margin: 12em -6em;

animation-name: mov8;

}

@keyframes mov8 {

0%, 42.8125% {

transform: none;

}

52.5%,

100% {

transform: translateZ(10em);

}

}

.bar:nth-child(9) {

z-index: 24;

margin: 12em -12em;

animation-name: mov9;

}

@keyframes mov9 {

0%, 47.5% {

transform: none;

}

57.1875%,

100% {

transform: translateZ(10em);

}

}

.bar:nth-child(10) {

z-index: 18;

margin: 6em -12em;

animation-name: mov10;

}

@keyframes mov10 {

0%, 52.1875% {

transform: none;

}

61.875%,

100% {

transform: translateZ(10em);

}

}

.bar:nth-child(11) {

z-index: 12;

margin: 0em -12em;

animation-name: mov11;

}

@keyframes mov11 {

0%, 56.875% {

transform: none;

}

66.5625%,

100% {

transform: translateZ(10em);

}

}

.bar:nth-child(12) {

z-index: 6;

margin: -6em -12em;

animation-name: mov12;

}

@keyframes mov12 {

0%, 61.5625% {

transform: none;

}

71.25%,

100% {

transform: translateZ(10em);

}

}

.bar:nth-child(13) {

z-index: 0;

margin: -12em -12em;

animation-name: mov13;

}

@keyframes mov13 {

0%, 66.25% {

transform: none;

}

75.9375%,

100% {

transform: translateZ(10em);

}

}

.bar:nth-child(14) {

z-index: -6;

margin: -12em -6em;

animation-name: mov14;

}

@keyframes mov14 {

0%, 70.9375% {

transform: none;

}

80.625%,

100% {

transform: translateZ(10em);

}

}

.bar:nth-child(15) {

z-index: -12;

margin: -12em 0em;

animation-name: mov15;

}

@keyframes mov15 {

0%, 75.625% {

transform: none;

}

85.3125%,

100% {

transform: translateZ(10em);

}

}

.bar:nth-child(16) {

z-index: -18;

margin: -12em 6em;

animation-name: mov16;

}

@keyframes mov16 {

0%, 80.3125% {

transform: none;

}

90%,

100% {

transform: translateZ(10em);

}

}

.bar__face {

margin: -10em -2em;

width: 4em;

height: 20em;

background: #bcbcbc;

}

.bar__face:nth-child(-n + 2):after {

width: inherit;

height: inherit;

background: linear-gradient(#1f0036 16%, rgba(31, 0, 54, 0));

content: '';

}

.bar__face:nth-child(1) {

transform: rotateX(90deg) rotateY(-90deg) translateZ(2em);

box-shadow: inset 2px -2px 8px #ddd;

}

.bar__face:nth-child(2) {

transform: rotateX(90deg) rotateY(-180deg) translateZ(2em);

box-shadow: inset -2px -2px 8px #ddd;

}

.bar__face:last-child {

margin-top: -2em;

height: 4em;

transform: translateZ(10em);

box-shadow: inset 2px -2px 8px #ddd;

background: lightgray;

}

@keyframes mov {

0% {

transform: translateZ(10em);

}

}