更改背景颜色

Question

我有一个页面，背景的样式设置为对角线。 我想使这些线条的颜色随着jQuery的变化而缓慢变化，并随着它们的变化而逐渐消失。 这可能吗？

我已经开始使用CSS来摆弄小提琴，以将背景显示为静态。 http://jsfiddle.net/rabelais/LZc7m/

这是代码

body {
    background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, #fff), color-stop(0.25, #fff), color-stop(0.25, #9CC), color-stop(0.5, #9CC), color-stop(0.5, #fff), color-stop(0.75, #fff), color-stop(0.75, #9CC));
    background-image: -webkit-linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CCb 50%, #fff 50%, #fff 75%, #9CC 75%);
    background-image: -moz-linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CC 50%, #fff 50%, #fff 75%, #9cc 75%);
    background-image: -ms-linear-gradient(right bottom, #fff 0%, #fff 25%, #bbb 25%, #bbb 50%, #fff 50%, #fff 75%, #bbb 75%);
    background-image: -o-linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CC 50%, #fff 50%, #fff 75%, #9CC 75%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#9CC',GradientType=0 ); / IE6-8 */
    background-image: linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CC 50%, #fff 50%, #fff 75%, #9CC 75%);
    background-size: 5px 5px;
    width:100%;
    height:100%;
}

Answer 1

您可以将背景图像设置为GIF，如果可以承受额外的尺寸并利用透明度，则最好将其设置为PNG。 您的图像会有白色和透明的条纹。 然后，将背景图像叠加在背景颜色上，即可设置背景颜色的动画。 效果将是线条的颜色发生变化。

Answer 2

建立在rgbflawed答案上..您将需要Color Animation JS

这是一个JSfiddle示例

$(document).ready(function () {
    $('html, body').click(function () {
        $('body').stop().animate({ backgroundColor: '#ff0000' }, 1200);
        $('body').delay(1200).animate({ backgroundColor: '#ffffff' }, 1200);
    });

});

CSS

body {
    background-image: url(http://i.stack.imgur.com/V3pEr.png);
    background-color: #12877f;
}

更新在这里逐渐淡化为白色

Answer 3

我建议使用css3过渡而不是仅使用jQuery。 使用jQuery切换类，并在单独的CSS文件中设置背景渐变。

例：

.defaultClass{
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    -ms-transition: color 0.3s;
    -o-transition: color 0.3s;
    transition: color 0.3s;
}

.blue{
    background-color: blue;
}

.red{
    background-color: red;
}

向元素中添加了蓝色类，将使其在0.3秒内褪色为蓝色。

这是它的小提琴： http : //jsfiddle.net/Rudi91/sttdL/

编辑：最大的好处是，jQuery动画在手机/平板电脑上的运行速度很慢，而css3动画通常运行平稳

Answer 4

我已经开发了一个轻量级的jQuery插件（〜3kb），该插件使用CSS3过渡来完成您要寻找的东西-ColorRotator.js

您可以使用它来转换各种CSS颜色属性，例如背景颜色，框阴影颜色和文本颜色。 将来将支持更多属性。

用法示例：

$('#element').colorRotator({
    colors: ['#1abc9c','#16a085','#2ecc71','#27ae60'],
    property: 'background'
});

这是一些现场演示