html
html
1
2
3
4
5
6
7
<html>
<head>
</head>
<body>
<div id="cont"><div id="box"></div></div><input type="range" onchange="upd(this)" max="40" step="5" value="0"><p>Speed: <span id="sp">0</span></p>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#cont {
position: relative;
width: 300px;
height: 300px;
background: green;
}
#box {
position: absolute;
width: 50px;
height: 50px;
background: radial-gradient( red, black);
border-radius: 25px;
animation-name: rotate;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
input {
width: 300px;
margin: 0;
background: green;
padding: 10px;
}
@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var top = 0;
var left = 0;
function upd(t) {
var sp = document.getElementById("sp");
sp.innerHTML = t.value;
top = 0.1 * t.value;
left = 0.15 * t.value;
}
window.onload = function () {
var xpos = 0;
var ypos = 0;
var box = document.getElementById("box");
var timer = setInterval(move, 10);
function move() {
ypos += top;
box.style.top = ypos + "px";
if (ypos <= 0)
top = Math.abs(top);
if (ypos >= 250)
top = -(Math.abs(top));
xpos += left;
box.style.left = xpos + "px";
if (xpos <= 0)
left = Math.abs(left);
if (xpos >= 250)
left = -(Math.abs(left));
}
};
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run