CSS3 Javascript循環漸變

Question

我正在尋找實現梯度周期的某種先機/方向，類似於Antenna的方法： http : //www.theantenna.net

任何幫助將非常感激。

Answer 1

這是在上述站點上進行顏色循環的代碼：

Module("GradientCycle", {
    bones: "<div></div>",
    noGradient: "Please use a modern browser (like Chrome, Firefox or Safari) to fully enjoy this site",
    saturation: 0.5,
    value: 1,
    angle: 120,
    loopSpeed: 50,
    webkitCSS: "-webkit-gradient(linear, left bottom, left top,color-stop(0, rgb(RGB1)),color-stop(.5, rgb(RGB2)),color-stop(1, rgb(RGB3)))",
    geckoCSS: "-moz-linear-gradient(center bottom,rgb(RGB1) 0%,rgb(RGB2) 50%,rgb(RGB3) 100%);",
    init: function() {
        this.css = this.testCSS();
        this.seed = this.hue || Math.floor(Math.random() * 360)
    },
    testCSS: function() {
        return $("html").hasClass("webkit") ? this.webkitCSS : $("html").hasClass("gecko") ? this.geckoCSS : null
    },
    setCol: function() {
        var e = (++this.seed) % 360,
            m = this.saturation,
            l = this.value,
            k = this.angle,
            j = (e + 180 + k) % 360,
            g = (e + 180 - k) % 360,
            d = hsvToRgb(e / 360, m, l),
            c = hsvToRgb(j / 360, m, l),
            b = hsvToRgb(g / 360, m, l),
            f = this.css.replace(/RGB1/, d.join(",")).replace(/RGB2/, c.join(",")).replace(/RGB3/, b.join(","));
        this.$.attr("style", "background:" + f);
        return this
    },
    start: function() {
        if (!this.css) {
            return this.$.html(this.noGradient)
        }
        this.stop();
        this.loop = setInterval($.proxy(this.setCol, this), this.loopSpeed);
        return this
    },
    stop: function() {
        clearInterval(this.loop);
        return this
    }
});

基本上，歸結為修改CSS3漸變的顏色值。