CSS渐变背景

来源：互联网发布：byethost绑定域名编辑：程序博客网时间：2024/05/29 11:22

直接上代码：

.member-top { -webkit-animation:changeBg 20s infinite; -moz-animation:changeBg 20s infinite; animation:changeBg 20s infinite;background-color:#ED5564; background-image: url(member_top_bg.png); background-size: cover; text-align: center; width: 100%; height: 11rem; position: relative; z-index: 1;}
@-webkit-keyframes changeBg{
0%{background-color:#ED5564;}
10%{background-color:#FB6E52;}
20%{background-color:#FFCE55;}
30%{background-color:#A0D468;}
40%{background-color:#48CFAE;}
50%{background-color:#4FC0E8;}
60%{background-color:#5D9CEC;}
70%{background-color:#AC92ED;}
80%{background-color:#EC87BF;}
90%{background-color:#ED5564;}
}
@-moz-keyframes changeBg{
0%{background-color:#ED5564;}
10%{background-color:#FB6E52;}
20%{background-color:#FFCE55;}
30%{background-color:#A0D468;}
40%{background-color:#48CFAE;}
50%{background-color:#4FC0E8;}
60%{background-color:#5D9CEC;}
70%{background-color:#AC92ED;}
80%{background-color:#EC87BF;}
90%{background-color:#ED5564;}
}
@keyframes changeBg{
0%{background-color:#ED5564;}
10%{background-color:#FB6E52;}
20%{background-color:#FFCE55;}
30%{background-color:#A0D468;}
40%{background-color:#48CFAE;}
50%{background-color:#4FC0E8;}
60%{background-color:#5D9CEC;}
70%{background-color:#AC92ED;}
80%{background-color:#EC87BF;}
90%{background-color:#ED5564;}
}

demo地址:https://github.com/RainManGO/changeBgm-CSS-

0 0