0

Возник такой вопрос. как изменить радиус градиента через js???

Либо что я делаю не так? Хотелось бы получить ответ на чистом js.

https://codepen.io/RedSkyby/pen/wjEWNM

var curcle = document.getElementById("curcle");

window.onload = function() {
  for (var i = 0; i < 20; i++) {
    curcle.style.background = "radial-gradient([i]em, #667db6 , #0082c8 ,#0082c8 ,#667db6)"; //тут я меняю радиус ,если I подставлять вручную - всё работает
  }
};
* {
  margin: 0;
  padding: 0;
}

#curcle {
  background: radial-gradient(18em, #667db6, #0082c8, #0082c8, #667db6);
  width: 100%;
  height: 100vh;
}
<body>
  <div id="curcle"></div>
</body>

1
  • у тебя небольшая ошибка, нужно написать curcle.style.background = "radial-gradient(" + i + "em, #667db6..., но даже если ты напишешь верно то этот код выполнится за столь короткое время, что глаз не заметит изменение градиента 18 мая 2018 в 16:03

2 ответа 2

2

window.onload = () => {
  var curcle = document.getElementById("curcle");

  // Array(20).fill(0).forEach((x, idx) =>
  //    setTimeout(() => curcle.style.background = `radial-gradient(${idx}em, #667db6, #0082c8, #0082c8, #667db6)`, idx * 100));

  for(let i = 0; i < 20; i++){
    setTimeout(() => curcle.style.background = `radial-gradient(${i}em, #667db6, #0082c8, #0082c8, #667db6)`, i * 100);
  } 
};
* {
  margin: 0;
  padding: 0;
}

#curcle {
  background: radial-gradient(18em, #667db6, #0082c8, #0082c8, #667db6);
  width: 100%;
  height: 100vh;
}
<body>
  <div id="curcle"></div>
</body>

0

var curcle = document.getElementById("curcle");

window.onload = function() {
  for (var i = 0; i < 20; i++) {
  console.log(i);
    curcle.style.background = "radial-gradient("+i+" em, #667db6 , #0082c8 ,#0082c8 ,#667db6)"; //тут я меняю радиус ,если I подставлять вручную - всё работает
  }
};
* {
  margin: 0;
  padding: 0;
}

#curcle {
  background: radial-gradient(18em, #667db6, #0082c8, #0082c8, #667db6);
  width: 100%;
  height: 100vh;
}
<body>
  <div id="curcle"></div>
</body>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.