CSS3的JavaScript循环梯度

Question

我希望得到某种头的开始/方向来实现梯度循环，类似天线的一个：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渐变的色值。