Domovská stránka Prehľadávať Pomoc
Registrovať Prihlásiť sa
lhl
/
myjadmin
1
0
Fork 0
Súbory Issues 0 Pull requesty 0 Wiki
Strom: 8678a650bd
Branche Tagy
myjadmin
/
node_modules
/
snabbdom
/
examples
/
carousel-svg
/
index.html

index.html 1.8 KB
História Raw

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283 
  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3.   <head>
    4. 

  4.     <meta
    5. 

  5.       name="viewport"
    6. 

  6.       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    7. 

  7.     />
    8. 

  8.     <meta charset="utf-8" />
    9. 

  9.     <title>Carousel</title>
    10. 

  10.     <script type="module" src="./index.js"></script>
    11. 

  11.     <style type="text/css">
    12. 

  12.       div.view {
    13. 

  13.         margin: 10px;
    14. 

  14.       }
    15. 

  15.       h1 {
    16. 

  16.         font-size: 24px;
    17. 

  17.         color: #505000;
    18. 

  18.       }
    19. 

  19.       svg {
    20. 

  20.         display: block;
    21. 

  21.         margin-bottom: 10px;
    22. 

  22.         border: 1px solid gray;
    23. 

  23.       }
    24. 

  24.       g#carousel {
    25. 

  25.         -webkit-transition: -webkit-transform 1s ease;
    26. 

  26.         transition: transform 1s ease;
    27. 

  27.       }
    28. 

  28.       polygon {
    29. 

  29.         stroke: #808000;
    30. 

  30.         transition: fill 0.5s linear;
    31. 

  31.       }
    32. 

  32.       polygon#yellow {
    33. 

  33.         fill: rgba(255, 255, 0, 0.4);
    34. 

  34.       }
    35. 

  35.       polygon#yellow:hover,
    36. 

  36.       polygon#yellow:active {
    37. 

  37.         fill: yellow;
    38. 

  38.       }
    39. 

  39.       polygon#green {
    40. 

  40.         fill: rgba(0, 128, 0, 0.4);
    41. 

  41.       }
    42. 

  42.       polygon#green:hover,
    43. 

  43.       polygon#green:active {
    44. 

  44.         fill: green;
    45. 

  45.       }
    46. 

  46.       polygon#magenta {
    47. 

  47.         fill: rgba(255, 0, 255, 0.4);
    48. 

  48.       }
    49. 

  49.       polygon#magenta:hover,
    50. 

  50.       polygon#magenta:active {
    51. 

  51.         fill: magenta;
    52. 

  52.       }
    53. 

  53.       polygon#red {
    54. 

  54.         fill: rgba(255, 0, 0, 0.4);
    55. 

  55.       }
    56. 

  56.       polygon#red:hover,
    57. 

  57.       polygon#red:active {
    58. 

  58.         fill: red;
    59. 

  59.       }
    60. 

  60.       polygon#cyan {
    61. 

  61.         fill: rgba(0, 255, 255, 0.4);
    62. 

  62.       }
    63. 

  63.       polygon#cyan:hover,
    64. 

  64.       polygon#cyan:active {
    65. 

  65.         fill: cyan;
    66. 

  66.       }
    67. 

  67.       polygon#blue {
    68. 

  68.         fill: rgba(0, 0, 255, 0.4);
    69. 

  69.       }
    70. 

  70.       polygon#blue:hover,
    71. 

  71.       polygon#blue:active {
    72. 

  72.         fill: blue;
    73. 

  73.       }
    74. 

  74.       button {
    75. 

  75.         font-size: 15px;
    76. 

  76.         margin: 0 0.7em 0.7em 0;
    77. 

  77.       }
    78. 

  78.     </style>
    79. 

  79.   </head>
    80. 

  80.   <body>
    81. 

  81.     <div id="container"></div>
    82. 

  82.   </body>
    83. 

  83. </html>
    84.