css实例教程 一款纯css3实现的超炫动画背画特效

2020-05-06 09:05:57易采站长站整理

transform: translate3d(0px, 0px, 0px);
}
.fake-gif .stripe:nth-child(odd) {
left: 0;
width: 100%;
height: 5%;
background-color: rgba(109, 60, 209, 0.5);
box-shadow: 0px 6px 40px #5800FF, inset 0px 2px 5px #DF00FF;</p>
<p>}
.fake-gif .stripe:nth-child(even) {
top: 0;
width: 5%;
height: 100%;
background-color: rgba(0, 240, 40, 0.5);
box-shadow: 0px 6px 40px #007D35, inset 0px 2px 5px #7CFFB5;
}
.fake-gif .stripe:nth-child(4n+1) {
z-index: 3;
}
.fake-gif .stripe:nth-child(4n+2) {
z-index: 4;
}
.fake-gif .stripe:nth-child(4n+3) {
z-index: 1;
}
.fake-gif .stripe:nth-child(4n) {
z-index: 2;
}
.fake-gif .stripe:nth-child(2) {
left: 4.7%;
-webkit-animation: move-y 2.7s 0.2s infinite;
animation: move-y 2.7s 0.2s infinite;
}
.fake-gif .stripe:nth-child(4) {
left: 11.9%;
-webkit-animation: move-y 2.7s 0.4s infinite;
animation: move-y 2.7s 0.4s infinite;
}
.fake-gif .stripe:nth-child(6) {
left: 19.1%;
-webkit-animation: move-y 2.7s 0.6s infinite;
animation: move-y 2.7s 0.6s infinite;
}
.fake-gif .stripe:nth-child(8) {
left: 26.3%;
-webkit-animation: move-y 2.7s 0.8s infinite;
animation: move-y 2.7s 0.8s infinite;
}
.fake-gif .stripe:nth-child(10) {
left: 33.5%;
-webkit-animation: move-y 2.7s 1s infinite;
animation: move-y 2.7s 1s infinite;
}
.fake-gif .stripe:nth-child(12) {
left: 40.7%;
-webkit-animation: move-y 2.7s 1.2s infinite;
animation: move-y 2.7s 1.2s infinite;
}
.fake-gif .stripe:nth-child(14) {
left: 47.9%;
-webkit-animation: move-y 2.7s 1.4s infinite;
animation: move-y 2.7s 1.4s infinite;
}
.fake-gif .stripe:nth-child(16) {
left: 55.1%;
-webkit-animation: move-y 2.7s 1.6s infinite;
animation: move-y 2.7s 1.6s infinite;
}
.fake-gif .stripe:nth-child(18) {
left: 62.3%;
-webkit-animation: move-y 2.7s 1.8s infinite;
animation: move-y 2.7s 1.8s infinite;
}
.fake-gif .stripe:nth-child(20) {
left: 69.5%;
-webkit-animation: move-y 2.7s 2s infinite;
animation: move-y 2.7s 2s infinite;
}
.fake-gif .stripe:nth-child(22) {
left: 76.7%;
-webkit-animation: move-y 2.7s 2.2s infinite;
animation: move-y 2.7s 2.2s infinite;
}
.fake-gif .stripe:nth-child(24) {
left: 83.9%;
-webkit-animation: move-y 2.7s 2.4s infinite;
animation: move-y 2.7s 2.4s infinite;
}
.fake-gif .stripe:nth-child(26) {
left: 91.1%;
-webkit-animation: move-y 2.7s 2.6s infinite;
animation: move-y 2.7s 2.6s infinite;
}
.fake-gif .stripe:nth-child(1) {
top: 3.6%;
-webkit-animation: move-x 2.7s 0.1s infinite;
animation: move-x 2.7s 0.1s infinite;
}
.fake-gif .stripe:nth-child(3) {
top: 10.8%;
-webkit-animation: move-x 2.7s 0.3s infinite;