渐变banner

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

#indextype{
display:none !important;
}
.bannerTop{
width:100%;
min-width: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
}
}

posted @ 2020-01-10 15:30  翡翠城堡  阅读(118)  评论(0编辑  收藏  举报