用于将其应用于身体

Question

我是一名初学程序员，说实话，我正试图改变tumblr主题的背景。我想要一个移动的渐变（供参考：this page.上的一个渐变当我说我已经问过主人时，请相信我;他们没有很快的反应，并推迟我查找，我对代码一无所知，也无法做到。）

因此。好的。是。我想改变我的背景。我点击了一下，我发现当你右键单击并检查页面元素时，下拉到html正文，她有一个webkit渐变，其颜色值不断变化。我试图复制并将其复制到我自己的主题中，但我只抓住了复制渐变的那一刻，而不是整个变化值的东西。

我做错了什么？我该怎么做呢？

谢谢！

Answer 1

<强> Demo

尝试使渐变CSS与更多浏览器一起使用，原始代码仅适用于webkit和moz。

该网站使用以下代码：

JS

var colors = new Array(
  [255,255,255],
  [181,96,137],
  [136,210,221],
  [255,107,109],
  [173,88,143],
  [100,161,161]);

var step = 0;
//color table indices for: 
// current color left
// next color left
// current color right
// next color right
var colorIndices = [0,1,2,3];

//transition speed
var gradientSpeed = 0.003;

function updateGradient()
{
var c0_0 = colors[colorIndices[0]];
var c0_1 = colors[colorIndices[1]];
var c1_0 = colors[colorIndices[2]];
var c1_1 = colors[colorIndices[3]];

var istep = 1 - step;
var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
var color1 = "#"+((r1 << 16) | (g1 << 8) | b1).toString(16);

var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
var color2 = "#"+((r2 << 16) | (g2 << 8) | b2).toString(16);

$('#gradient').css({
    background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)",
}).css({
    background: "-webkit-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)",
}).css({
    background: "linear-gradient(to right, "+color1+" 0%, "+color2+" 100%)",
}).css({
    filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='"+color1+"', endColorstr='"+color2+"',GradientType=1 )",
});

  step += gradientSpeed;
  if ( step >= 1 )
  {
    step %= 1;
    colorIndices[0] = colorIndices[1];
    colorIndices[2] = colorIndices[3];

    //pick two new target color indices
    //do not pick the same as the current one
    colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
    colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;

  }
}

setInterval(updateGradient,10);

各自的css

html, body {
    height: 100%;
    margin:0;
    padding:0;
}

#gradient {
    height: 100%;
    background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(rgb(213, 239, 243)), to(rgb(213, 239, 243)));
}

html for demo

<div id="gradient"></div>

用于将其应用于身体

html, body {
    height: 100%;
    margin:0;
    padding:0;
}


body {
    height: 100%;
    background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(rgb(213, 239, 243)), to(rgb(213, 239, 243)));
}

JS

var colors = new Array(
  [255,255,255],
  [181,96,137],
  [136,210,221],
  [255,107,109],
  [173,88,143],
  [100,161,161]);

var step = 0;
//color table indices for: 
// current color left
// next color left
// current color right
// next color right
var colorIndices = [0,1,2,3];

//transition speed
var gradientSpeed = 0.003;

function updateGradient()
{
var c0_0 = colors[colorIndices[0]];
var c0_1 = colors[colorIndices[1]];
var c1_0 = colors[colorIndices[2]];
var c1_1 = colors[colorIndices[3]];

var istep = 1 - step;
var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
var color1 = "#"+((r1 << 16) | (g1 << 8) | b1).toString(16);

var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
var color2 = "#"+((r2 << 16) | (g2 << 8) | b2).toString(16);

 $('body').css({
   background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({
    background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"});

  step += gradientSpeed;
  if ( step >= 1 )
  {
    step %= 1;
    colorIndices[0] = colorIndices[1];
    colorIndices[2] = colorIndices[3];

    //pick two new target color indices
    //do not pick the same as the current one
    colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
    colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;

  }
}

setInterval(updateGradient,10);

移动webkit渐变背景？

1 个答案:

用于将其应用于身体