Образно, процесс можно проиллюстрировать на примере стрелочных часов: одна стрелка неподвижна, другая двигается до определённого значения и пространство между ними заполняется цветом (стрелок при этом нет, это просто образная визуализация границ).
Ответ
CSS решение
Все стили перенес в css и анимация сделана с помощью правил css
.container {
width:25%;
height:25%
}
#crc {
fill:none;
stroke:green;
stroke-width:100;
stroke-dashoffset:314;
stroke-dasharray:314;
animation: draw 10s ease-out infinite forwards;
}
@keyframes draw {
from {
stroke-dashoffset: 314;
}
to {
stroke-dashoffset: 0;
}
}
Приложение полностью адаптивно, так же как вариант решения SVG
Работает во всех современных браузерах, кроме IE, который не понимает анимацию по определению.
Комментариев нет:
Отправить комментарий