css 背景色动画

向右看齐 2023-03-14 13:20 25阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            .member-top {
                -webkit-animation: changeBg 20s infinite;
                -moz-animation: changeBg 20s infinite;
                animation: changeBg 20s infinite;
                background-color: #ED5564;
                /* background-image: url(../images/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;
                }
            }
        </style>
    </head>
    
    <body>
    
        <div class="member-top"></div>
    </body>
    
    </html>