| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta
- name="viewport"
- content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
- />
- <meta charset="utf-8" />
- <title>Carousel</title>
- <script type="module" src="./index.js"></script>
- <style type="text/css">
- div.view {
- margin: 10px;
- }
- h1 {
- font-size: 24px;
- color: #505000;
- }
- svg {
- display: block;
- margin-bottom: 10px;
- border: 1px solid gray;
- }
- g#carousel {
- -webkit-transition: -webkit-transform 1s ease;
- transition: transform 1s ease;
- }
- polygon {
- stroke: #808000;
- transition: fill 0.5s linear;
- }
- polygon#yellow {
- fill: rgba(255, 255, 0, 0.4);
- }
- polygon#yellow:hover,
- polygon#yellow:active {
- fill: yellow;
- }
- polygon#green {
- fill: rgba(0, 128, 0, 0.4);
- }
- polygon#green:hover,
- polygon#green:active {
- fill: green;
- }
- polygon#magenta {
- fill: rgba(255, 0, 255, 0.4);
- }
- polygon#magenta:hover,
- polygon#magenta:active {
- fill: magenta;
- }
- polygon#red {
- fill: rgba(255, 0, 0, 0.4);
- }
- polygon#red:hover,
- polygon#red:active {
- fill: red;
- }
- polygon#cyan {
- fill: rgba(0, 255, 255, 0.4);
- }
- polygon#cyan:hover,
- polygon#cyan:active {
- fill: cyan;
- }
- polygon#blue {
- fill: rgba(0, 0, 255, 0.4);
- }
- polygon#blue:hover,
- polygon#blue:active {
- fill: blue;
- }
- button {
- font-size: 15px;
- margin: 0 0.7em 0.7em 0;
- }
- </style>
- </head>
- <body>
- <div id="container"></div>
- </body>
- </html>
|
