Ребят нужна помощь.
проблема в том что элемент должен двигаться по кругу, а не по квадрату, не могу понять как это сделать (какая то заставка dvd-шника получается через некоторое время, через минут 5)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="UTF-8"/>
<title>Экперименты</title>
<style>
#central{
height: 100px;
width: 100px;
background-color: black;
margin: 0px auto;
position: relative;
}
#vokrug{
margin: 0 auto;
height: 10px;
width: 10px;
border-radius: 5px;
background-color: red;
position: relative;
}
</style>
</head>
<body>
<div id="central"><div id="vokrug"></div></div>
<script>
var myvar = document.getElementById('vokrug');
var supvar = 0;
var megvar = 0;
sFunc();
mFunc();
var bottom = 'on';
var taser = 'on'
function sFunc() {
setTimeout(function() {
if(taser == 'on') {
supvar = supvar + 0.5;
if(supvar == 45){
taser = 'off';
}
}else {
supvar = supvar - 0.5;
if(supvar == -45){
taser = 'on';
}
};
myvar.style.left = ''+supvar+'px';
sFunc();
},25);
};
function mFunc() {
setTimeout(function() {
if(bottom == 'on') {
megvar = megvar + 1;
if(megvar == 90){
bottom = 'off';
}
}
else {
megvar = megvar - 1;
if(megvar==0){
bottom = 'on';
}
}
myvar.style.top = ''+megvar+'px';
mFunc()();
},50);
};
</script>
</body>
</html>
и хотелось бы реализовать всё без canvas
помогите пожалуйста реализовать
