CSS

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 example

$(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;
}

更新为here以淡出为白色

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'
});

以下是一些live demos

使背景颜色发生变化

4 个答案:

CSS