html5 透明起伏,HTML5 律动（波动起伏）的方形格子墙壁

CSS

语言：

CSSSCSS

确定

body {

background-color: #adadad;

overflow: hidden;

}

.slides-row {

clear: both;

margin: 0 auto 24px;

height: 50px;

}

.slides-single {

background-color: #3c3c3c;

box-shadow: inset 0px 0px 12px 0px #000;

float: left;

margin-right: 24px;

width: 50px;

height: 50px;

}

.slides-img {

border: 1px solid #adadad;

background-color: #adadad;

width: 50px;

height: 50px;

position: relative;

top: 0px;

left: 0%;

animation-name: upAnimation;

animation-iteration-count: infinite;

-webkit-animation-play-state: running;

animation-play-state: running;

}

@keyframes upAnimation {

30% {

box-shadow: 0px 0px 0px #222;

border: 1px solid #6b6b6b;

top: 0px;

left: 0%;

width: 100%;

}

50% {

box-shadow: 10px 32px 32px #222;

top: -24px;

left: -10%;

width: 120%;

}

70% {

box-shadow: 0px 0px 0px #222;

border: 1px solid #6b6b6b;

top: 0px;

left: 0%;

width: 100%;

}

80% {

border: 1px solid #adadad;

}

}