index.html 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>HTML5统计图表数据初始动画DEMO演示</title>
  6. <link rel="stylesheet" href="css/reset.css">
  7. <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
  8. <script src="js/modernizr.js"></script>
  9. </head>
  10. <body>
  11. <div style="text-align:center;clear:both;">
  12. <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
  13. <script src="/follow.js" type="text/javascript"></script>
  14. </div>
  15. <div class="charts-container cf">
  16. <div class="chart" id="graph-1-container">
  17. <h2 class="title">Hours worked</h2>
  18. <div class="chart-svg">
  19. <svg class="chart-line" id="chart-1" viewBox="0 0 80 40">
  20. <defs>
  21. <clipPath id="clip" x="0" y="0" width="80" height="40" >
  22. <rect id="clip-rect" x="-80" y="0" width="77" height="38.7"/>
  23. </clipPath>
  24. <linearGradient id="gradient-1">
  25. <stop offset="0" stop-color="#00d5bd" />
  26. <stop offset="100" stop-color="#24c1ed" />
  27. </linearGradient>
  28. <linearGradient id="gradient-2">
  29. <stop offset="0" stop-color="#954ce9" />
  30. <stop offset="0.3" stop-color="#954ce9" />
  31. <stop offset="0.6" stop-color="#24c1ed" />
  32. <stop offset="1" stop-color="#24c1ed" />
  33. </linearGradient>
  34. <linearGradient id="gradient-3" x1="0%" y1="0%" x2="0%" y2="100%">>
  35. <stop offset="0" stop-color="rgba(0, 213, 189, 1)" stop-opacity="0.07"/>
  36. <stop offset="0.5" stop-color="rgba(0, 213, 189, 1)" stop-opacity="0.13"/>
  37. <stop offset="1" stop-color="rgba(0, 213, 189, 1)" stop-opacity="0"/>
  38. </linearGradient>
  39. <linearGradient id="gradient-4" x1="0%" y1="0%" x2="0%" y2="100%">>
  40. <stop offset="0" stop-color="rgba(149, 76, 233, 1)" stop-opacity="0.07"/>
  41. <stop offset="0.5" stop-color="rgba(149, 76, 233, 1)" stop-opacity="0.13"/>
  42. <stop offset="1" stop-color="rgba(149, 76, 233, 1)" stop-opacity="0"/>
  43. </linearGradient>
  44. </defs>
  45. </svg>
  46. <h3 class="valueX">time</h3>
  47. </div>
  48. <div class="chart-values">
  49. <p class="h-value">1689h</p>
  50. <p class="percentage-value"></p>
  51. <p class="total-gain"></p>
  52. </div>
  53. <div class="triangle green"></div>
  54. </div>
  55. <div class="chart" id="graph-2-container">
  56. <h2 class="title">Hours worked</h2>
  57. <div class="chart-svg">
  58. <svg class="chart-line" id="chart-2" viewBox="0 0 80 40">
  59. </svg>
  60. <h3 class="valueX">time</h3>
  61. </div>
  62. <div class="chart-values">
  63. <p class="h-value">322h</p>
  64. <p class="percentage-value"></p>
  65. <p class="total-gain"></p>
  66. </div>
  67. <div class="triangle red"></div>
  68. </div>
  69. <div class="chart circle" id="circle-1">
  70. <h2 class="title">IBApps Website</h2>
  71. <div class="chart-svg align-center">
  72. <h2 class="circle-percentage"></h2>
  73. <svg class="chart-circle" id="chart-3" width="50%" viewBox="0 0 100 100">
  74. <path class="underlay" d="M5,50 A45,45,0 1 1 95,50 A45,45,0 1 1 5,50"/>
  75. </svg>
  76. </div>
  77. <div class="triangle green"></div>
  78. </div>
  79. <div class="chart circle" id="circle-2">
  80. <h2 class="title">IBApps Website</h2>
  81. <div class="chart-svg align-center">
  82. <h2 class="circle-percentage"></h2>
  83. <svg class="chart-circle" id="chart-4" width="50%" viewBox="0 0 100 100">
  84. <path class="underlay" d="M5,50 A45,45,0 1 1 95,50 A45,45,0 1 1 5,50"/>
  85. </svg>
  86. </div>
  87. <div class="triangle red"></div>
  88. </div>
  89. </div>
  90. <script src='js/jquery.js'></script>
  91. <script src='js/snap.svg-min.js'></script>
  92. <script src="js/index.js"></script>
  93. </body>
  94. </html>