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;
}