css样式贪图蛇的编写,CSS3 3D游蛇

CSS

语言：

CSSSCSS

确定

body {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-flex-wrap: wrap;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

width: 100vw;

height: 100vh;

-webkit-perspective: 1000px;

perspective: 1000px;

background: -webkit-linear-gradient(top, red 0%, blue 100%);

background: linear-gradient(to bottom, red 0%, blue 100%);

}

@-webkit-keyframes snake {

from, to {

margin-left: 100px;

}

50% {

margin-left: -100px;

}

}

@keyframes snake {

from, to {

margin-left: 100px;

}

50% {

margin-left: -100px;

}

}

div {

width: 50px;

height: 50px;

border-radius: 50%;

background: -webkit-linear-gradient(top, red 0%, blue 100%);

background: linear-gradient(to bottom, red 0%, blue 100%);

margin-top: -25px;

margin-left: 100px;

}

div:nth-child(1) {

-webkit-transform: translate3d(10px, 0px, 20px);

transform: translate3d(10px, 0px, 20px);

-webkit-animation: snake 2s 200ms infinite ease-in-out;

animation: snake 2s 200ms infinite ease-in-out;

}

div:nth-child(2) {

-webkit-transform: translate3d(20px, 0px, 40px);

transform: translate3d(20px, 0px, 40px);

-webkit-animation: snake 2s 400ms infinite ease-in-out;

animation: snake 2s 400ms infinite ease-in-out;

}

div:nth-child(3) {

-webkit-transform: translate3d(30px, 0px, 60px);

transform: translate3d(30px, 0px, 60px);

-webkit-animation: snake 2s 600ms infinite ease-in-out;

animation: snake 2s 600ms infinite ease-in-out;

}

div:nth-child(4) {

-webkit-transform: translate3d(40px, 0px, 80px);

transform: translate3d(40px, 0px, 80px);

-webkit-animation: snake 2s 800ms infinite ease-in-out;

animation: snake 2s 800ms infinite ease-in-out;

}

div:nth-child(5) {

-webkit-transform: translate3d(50px, 0px, 100px);

transform: translate3d(50px, 0px, 100px);

-webkit-animation: snake 2s 1000ms infinite ease-in-out;

animation: snake 2s 1000ms infinite ease-in-out;

}

div:nth-child(6) {

-webkit-transform: translate3d(60px, 0px, 120px);

transform: translate3d(60px, 0px, 120px);

-webkit-animation: snake 2s 1200ms infinite ease-in-out;

animation: snake 2s 1200ms infinite ease-in-out;

}

div:nth-child(7) {

-webkit-transform: translate3d(70px, 0px, 140px);

transform: translate3d(70px, 0px, 140px);

-webkit-animation: snake 2s 1400ms infinite ease-in-out;

animation: snake 2s 1400ms infinite ease-in-out;

}

div:nth-child(8) {

-webkit-transform: translate3d(80px, 0px, 160px);

transform: translate3d(80px, 0px, 160px);

-webkit-animation: snake 2s 1600ms infinite ease-in-out;

animation: snake 2s 1600ms infinite ease-in-out;

}

div:nth-child(9) {

-webkit-transform: translate3d(90px, 0px, 180px);

transform: translate3d(90px, 0px, 180px);

-webkit-animation: snake 2s 1800ms infinite ease-in-out;

animation: snake 2s 1800ms infinite ease-in-out;

}

div:nth-child(10) {

-webkit-transform: translate3d(100px, 0px, 200px);

transform: translate3d(100px, 0px, 200px);

-webkit-animation: snake 2s 2000ms infinite ease-in-out;

animation: snake 2s 2000ms infinite ease-in-out;

}