渐变banner

<div class="bannerTop" style="z-index:-9;">
</div>

#indextype{
display:none !important;
}
.bannerTop{
100%;
min-1920px;
height:260px;
background: linear-gradient(to right, #c04848, #480048);

position: relative;
animation: colorswitch 20s infinite;
/* Firefox */
-moz-animation: colorswitch 20s infinite;
/* Safari and Chrome */
-webkit-animation: colorswitch 20s infinite;
/* Opera */
-o-animation: colorswitch 20s infinite;
}
@keyframes colorswitch {
0% {
background: #0087C9
}

16% {
background: #EF4A53
}

32% {
background: #FFB463
}

49% {
background: #33D5D4
}

65% {
background: #254356
}

81% {
background: #5B4097
}

100% {
background: #0087C9
}
}

/* Firefox */
@-moz-keyframes colorswitch {
0% {
background: #0087C9
}

16% {
background: #EF4A53
}

32% {
background: #FFB463
}

49% {
background: #33D5D4
}

65% {
background: #254356
}

81% {
background: #5B4097
}

100% {
background: #0087C9
}
}

/* Safari and Chrome */
@-webkit-keyframes colorswitch {
0% {
background: #0087C9
}

16% {
background: #EF4A53
}

32% {
background: #FFB463
}

49% {
background: #33D5D4
}

65% {
background: #254356
}

81% {
background: #5B4097
}

100% {
background: #0087C9
}
}

/* Opera */
@-o-keyframes colorswitch {
0% {
background: #0087C9
}

16% {
background: #EF4A53
}

32% {
background: #FFB463
}

49% {
background: #33D5D4
}

65% {
background: #254356
}

81% {
background: #5B4097
}

100% {
background: #0087C9
}
}

原文地址:https://www.cnblogs.com/wensx/p/12176356.html