-
Notifications
You must be signed in to change notification settings - Fork 19
/
clock.html
executable file
·72 lines (65 loc) · 3.75 KB
/
clock.html
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Clock</title>
<link rel="stylesheet" href="style.css">
<script src="snap.svg-min.js"></script>
<script>
window.onload = function () {
var clock = Snap.select("#clock");
var left = clock.select("#left");
var right = clock.select("#right");
var big_hand = clock.select("#big-hand");
function revert() {
left.animate({
transform: "rotate(0)"
}, 200, mina.easeout);
right.animate({
transform: "rotate(0)"
}, 200, mina.easeout);
big_hand.animate({
transform: "rotate(0," + big_hand.getBBox().cx + "," + big_hand.getBBox().y2 + ")"
}, 400, mina.easeout);
}
function open() {
left.animate({
transform: "rotate(-30," + left.getBBox().cx + "," + left.getBBox().cy + ")"
}, 1000, mina.bounce, revert);
right.animate({
transform: "rotate(30," + right.getBBox().cx + "," + right.getBBox().cy + ")"
}, 1000, mina.bounce);
big_hand.animate({
transform: "rotate(360," + big_hand.getBBox().cx + "," + big_hand.getBBox().y2 + ")"
}, 600, mina.easin);
}
clock.click(open);
}
</script>
</head>
<body>
<svg fill="#FFFFFF" stroke="#FFFFFF" version="1.1" id="clock" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100px" height="100px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
<path fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M5.841,64.598"/>
<path fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M17.365,57.971"/>
<ellipse cx="31.53" cy="3.821" rx="2.475" ry="1.408"/>
<circle cx="31.53" cy="34.104" r="24.914"/>
<circle fill="#232323" cx="31.53" cy="34.103" r="2.849"/>
<line fill="none" stroke="#232323" stroke-miterlimit="10" x1="31.53" y1="10.74" x2="31.53" y2="16.445"/>
<line fill="none" stroke="#232323" stroke-miterlimit="10" x1="31.53" y1="51.101" x2="31.53" y2="56.805"/>
<line fill="none" stroke="#232323" stroke-miterlimit="10" x1="48.524" y1="34.757" x2="54.23" y2="34.757"/>
<line fill="none" stroke="#232323" stroke-miterlimit="10" x1="8.829" y1="34.757" x2="14.535" y2="34.757"/>
<line fill="none" stroke="#232323" stroke-miterlimit="10" x1="15.348" y1="17.625" x2="19.383" y2="21.66"/>
<line fill="none" stroke="#232323" stroke-miterlimit="10" x1="42.551" y1="46.109" x2="46.584" y2="50.143"/>
<line fill="none" stroke="#232323" stroke-miterlimit="10" x1="45.563" y1="23.678" x2="49.599" y2="19.643"/>
<line fill="none" stroke="#232323" stroke-miterlimit="10" x1="16.643" y1="51.099" x2="20.678" y2="47.064"/>
<polygon id="big-hand" fill="#232323" points="29.973,32.361 31.53,19.643 33.085,32.361 "/>
<polygon id="little-hand" fill="#232323" points="31.368,32.643 39.116,28.229 32.661,34.382 "/>
<path id="right" fill="#FFF" stroke="#FFF" d="M42.937,6.372C41.61,10.52,58.225,20.807,59.552,16.658c1.328-4.145-1.315-9.81-5.901-12.651
C49.059,1.166,44.265,2.227,42.937,6.372z"/>
<line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="31.368" y1="8.514" x2="31.368" y2="3.821"/>
<path id="left" fill="#FFF" stroke="#FFF" d="M20.124,6.372C21.45,10.52,4.835,20.807,3.508,16.658C2.18,12.513,4.824,6.848,9.41,4.007
C14.001,1.166,18.794,2.227,20.124,6.372z"/>
</svg>
</body>
</html>