CSS中的动画渐变背景

-1

我正在尝试使用CSS来插入WordPress网站的背景，但似乎无法弄清楚。CSS中的动画渐变背景

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

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

谢谢您的时间！

来源

2014-09-10 keat

对不起的人...我们不编码为您 – LcSalazar 2014-09-10 22:03:34

所有的代码是有你在codepen，这将是非常简单的拖放到WordPress的模板。 – 2014-09-10 22:30:19

我做了这个效果一次，但没有渐变，只是纯色。我认为你可以使用背景图像：线性渐变（顶部，＃顶部颜色，＃底部颜色）和过渡时间编辑它：

使关键帧过渡并在对象中调用它。在这种情况下是满的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

我希望它为你工作。

来源

2014-09-10 23:11:46

在这里，我为你做了这个。

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

来源

2014-09-10 23:58:45 iSWORD

CSS中的动画渐变背景

回答

相关问题