CSS中的動畫漸變背景

Question

我正在嘗試使用CSS來插入WordPress網站的背景，但似乎無法弄清楚。

http://codepen.io/quasimondo/pen/lDdrF

body{ 
    background-color: #000000; 
    padding: 0px; 
    margin: 0px; 
} 

#gradient 
{ 
    width: 100%; 
    height: 800px; 
    padding: 0px; 
    margin: 0px; 
} 

謝謝您的時間！

Answer 1

我做了這個效果一次，但沒有漸變，只是純色。我認爲你可以使用背景圖像：線性漸變（頂部，＃頂部顏色，＃底部顏色）和過渡時間編輯它：

使關鍵幀過渡並在對象中調用它。在這種情況下是滿的HTML：

@-webkit-keyframes moveColor { 
    from { 
    background-color: #43536E; 
    } 
    10% { 
    background-color: #591553; 
    } 
    20% { 
    background-color: #00d5d6; 
    } 
    30% { 
    background-color: #8C0303; 
    } 
    40% { 
    background-color: #D6873A; 
    } 
    50% { 
    background-color: #3D4047; 
    } 
    60% { 
    background-color: #ffa73d; 
    } 
    70% { 
    background-color: #0089B3; 
    } 
    80% { 
    background-color: #9FB309; 
    } 
    90% { 
    background-color: #3a3a3a; 
    } 
    100% { 
    background-color: #5B4D41; 
    } 
    to { 
    background-color: #43536E; 
    } 
} 
@-moz-keyframes moveColor { 
    from { 
    background-color: #43536E; 
    } 
    10% { 
    background-color: #591553; 
    } 
    20% { 
    background-color: #00d5d6; 
    } 
    30% { 
    background-color: #8C0303; 
    } 
    40% { 
    background-color: #D6873A; 
    } 
    50% { 
    background-color: #3D4047; 
    } 
    60% { 
    background-color: #ffa73d; 
    } 
    70% { 
    background-color: #0089B3; 
    } 
    80% { 
    background-color: #9FB309; 
    } 
    90% { 
    background-color: #3a3a3a; 
    } 
    100% { 
    background-color: #5B4D41; 
    } 
    to { 
    background-color: #43536E; 
    } 
} 
@-ms-keyframes moveColor { 
    from { 
    background-color: #43536E; 
    } 
    10% { 
    background-color: #591553; 
    } 
    20% { 
    background-color: #00d5d6; 
    } 
    30% { 
    background-color: #8C0303; 
    } 
    40% { 
    background-color: #D6873A; 
    } 
    50% { 
    background-color: #3D4047; 
    } 
    60% { 
    background-color: #ffa73d; 
    } 
    70% { 
    background-color: #0089B3; 
    } 
    80% { 
    background-color: #9FB309; 
    } 
    90% { 
    background-color: #3a3a3a; 
    } 
    100% { 
    background-color: #5B4D41; 
    } 
    to { 
    background-color: #43536E; 
    } 
} 
@-o-keyframes moveColor { 
    from { 
    background-color: #43536E; 
    } 
    10% { 
    background-color: #591553; 
    } 
    20% { 
    background-color: #00d5d6; 
    } 
    30% { 
    background-color: #8C0303; 
    } 
    40% { 
    background-color: #D6873A; 
    } 
    50% { 
    background-color: #3D4047; 
    } 
    60% { 
    background-color: #ffa73d; 
    } 
    70% { 
    background-color: #0089B3; 
    } 
    80% { 
    background-color: #9FB309; 
    } 
    90% { 
    background-color: #3a3a3a; 
    } 
    100% { 
    background-color: #5B4D41; 
    } 
    to { 
    background-color: #43536E; 
    } 
} 
@keyframes moveColor { 
    from { 
    background-color: #43536E; 
    } 
    10% { 
    background-color: #591553; 
    } 
    20% { 
    background-color: #00d5d6; 
    } 
    30% { 
    background-color: #8C0303; 
    } 
    40% { 
    background-color: #D6873A; 
    } 
    50% { 
    background-color: #3D4047; 
    } 
    60% { 
    background-color: #ffa73d; 
    } 
    70% { 
    background-color: #0089B3; 
    } 
    80% { 
    background-color: #9FB309; 
    } 
    90% { 
    background-color: #3a3a3a; 
    } 
    100% { 
    background-color: #5B4D41; 
    } 
    to { 
    background-color: #43536E; 
    } 
} 
html { 
    -webkit-animation: moveColor 50s ease infinite; 
    -khtml-animation: moveColor 50s ease infinite; 
    -moz-animation: moveColor 50s ease infinite; 
    -ms-animation: moveColor 50s ease infinite; 
    -o-animation: moveColor 50s ease infinite; 
    animation: moveColor 50s ease infinite; 
    -webkit-transition: 0.3s; 
    -khtml-transition: 0.3s; 
    -moz-transition: 0.3s; 
    -ms-transition: 0.3s; 
    -o-transition: 0.3s; 
    transition: 0.3s; 
} 

http://codepen.io/ycisne/pen/Gqalu

我希望它爲你工作。

Answer 2

在這裏，我爲你做了這個。

body { 
    background: linear-gradient( 
    45deg, 
    violet, 
    red, 
    orange, 
    yellow, 
    green, 
    blue, 
    indigo, 
    violet 
); 

    background-size: 1000%; 

    animation: move_bg 500s linear 0s infinite; 
} 

@keyframes move_bg { 
    from {background-position: 0} 
    to {background-position: 1000%} 
} 

Demo