Как изменить радиус градиента

142

27 мая 2018, 00:50

Возник такой вопрос. как изменить радиус градиента через 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>

Answer 1

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>

Answer 2

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>

Создание интернет-магазина строительных материалов в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Отладка скриптов без Chrome

Есть скрипт выполняющий Ajax запросыДля его работы не нужен никакой интерфейс в браузере, но зато нужен node сервер

174

javascript

Изменить символ в jQuery

Похоже я просто затроил, но не пойму как сделать банальщину

171

Java

Отдельные классы в проекте

217

Java

Почему не работает Timer в Thread?

Реализовал отправку координатов пользователя на сервер, в UI потоке без TIMER код отрабатывает, теперь пытаюсь запускать поток раз в 5 секунд,...

235