1 | <!DOCTYPE html>
|
2 | <html>
|
3 | <head>
|
4 | <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
5 | <meta charset="utf-8">
|
6 | <title>Carousel</title>
|
7 | <script type="text/javascript" src="build.js"></script>
|
8 | <style type="text/css">
|
9 | div.view {
|
10 | margin: 10px;
|
11 | }
|
12 | h1 {
|
13 | font-size: 24px;
|
14 | color: #505000;
|
15 | }
|
16 | svg {
|
17 | display: block;
|
18 | margin-bottom: 10px;
|
19 | border: 1px solid gray;
|
20 | }
|
21 | g#carousel {
|
22 | -webkit-transition: -webkit-transform 1s ease;
|
23 | transition: transform 1s ease;
|
24 | }
|
25 | polygon {
|
26 | stroke: #808000;
|
27 | transition: fill 0.5s linear;
|
28 | }
|
29 | polygon#yellow {
|
30 | fill: rgba(255,255,0,0.4);
|
31 | }
|
32 | polygon#yellow:hover, polygon#yellow:active {
|
33 | fill: yellow;
|
34 | }
|
35 | polygon#green {
|
36 | fill: rgba(0,128,0,0.4);
|
37 | }
|
38 | polygon#green:hover, polygon#green:active {
|
39 | fill: green;
|
40 | }
|
41 | polygon#magenta {
|
42 | fill: rgba(255,0,255,0.4);
|
43 | }
|
44 | polygon#magenta:hover, polygon#magenta:active {
|
45 | fill: magenta;
|
46 | }
|
47 | polygon#red {
|
48 | fill: rgba(255,0,0,0.4);
|
49 | }
|
50 | polygon#red:hover, polygon#red:active {
|
51 | fill: red;
|
52 | }
|
53 | polygon#cyan {
|
54 | fill: rgba(0,255,255,0.4);
|
55 | }
|
56 | polygon#cyan:hover, polygon#cyan:active {
|
57 | fill: cyan;
|
58 | }
|
59 | polygon#blue {
|
60 | fill: rgba(0,0,255,0.4);
|
61 | }
|
62 | polygon#blue:hover, polygon#blue:active {
|
63 | fill: blue;
|
64 | }
|
65 | button {
|
66 | font-size: 15px;
|
67 | margin: 0 0.7em 0.7em 0;
|
68 | }
|
69 | </style>
|
70 | </head>
|
71 | <body>
|
72 | <div id="container"></div>
|
73 | </body>
|
74 | </html>
|