我是一名初级程序员,老实说,我正在尝试更改我的 tumblr 主题的背景。我想要一个移动的渐变(供引用:this page. 上的确切渐变) 相信我,我已经问过店主了;他们的 react 不是很好,并推迟了我的查找,而我对代码一无所知,无法做到这一点。)
所以。好的。是的。我想把我的背景改成这个。我点击了一下,发现当您右键单击并检查页面元素时,下拉到 html 正文,她有一个 webkit 渐变,其颜色值不断变化。我试图将它复制并粘贴到我自己的主题中,但我只捕获了复制渐变的那一刻,而不是整个变化的值。
我做错了什么?我该怎么做?
谢谢!
最佳答案
试图使渐变 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
<div id="gradient"></div>
将其应用于 body
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);
关于html - 移动 webkit 渐变背景?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25216437/