网页中时光轴CSS如何实现

互联网
春季是一个富有生命力季节，也是一个美丽、神奇，充满希望季节。柳树枝条向下垂着，就似一条条线挂树上。春季景色十分美丽，就似一幅栩栩如生画。

本文实例为大家分享了网页中时光轴的制作方法，供大家参考，具体内容如下

效果图：

实现代码：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>时光轴</title>
  6. <style>
  7. .container{
  8. width:800px;
  9. margin:50pxauto;
  10. }
  12. .vertical-timeline{
  13. color:#FFF;
  14. font-family:"微软雅黑","MicrosoftYaHei";
  15. }
  17. .vertical-timeline-block{
  18. width:100%;
  19. border-left:2pxsolid#DDD;
  20. margin:020px;
  21. position:relative;
  22. padding-bottom:30px;
  23. }
  25. /*时间轴的左侧图标*/
  26. .vertical-timeline-icon{
  27. width:40px;
  28. height:40px;
  29. border-radius:20px;
  30. position:absolute;
  31. left:-22px;
  32. top:10px;
  34. text-align:center;
  35. line-height:40px;
  36. cursor:pointer;
  37. transition:all0.2sease-in;
  38. -webkit-transition:all0.2sease-in;
  39. -moz-transition:all0.2sease-in;
  40. -o-transition:all0.2sease-in;
  41. }
  42. .vertical-timeline-block{
  43. cursor:pointer;
  44. }
  45. .vertical-timeline-block:hover.vertical-timeline-icon{
  46. width:50px;
  47. height:50px;
  48. border-radius:25px;
  49. line-height:50px;
  50. left:-27px;
  51. box-shadow:005px#CCC;
  52. font-size:25px;
  53. }
  55. /*时间轴的左侧图标的各种样式*/
  56. .v-timeline-icon1{
  57. background-color:#2aabd2;
  58. }
  59. .v-timeline-icon2{
  60. background-color:#5cb85c;
  61. }
  62. .v-timeline-icon3{
  63. background-color:#8c8c8c;
  64. }
  65. /*时间轴的左侧图标上的序号*/
  66. .vertical-timeline-iconi{
  67. font-style:normal;
  68. color:#FFF;
  69. }
  70. /*时间轴上的具体内容*/
  71. .vertical-timeline-content{
  72. background-color:#5bc0de;
  73. margin-left:60px;
  74. padding:20px30px;
  75. border-radius:5px;
  76. position:relative;
  77. }
  78. /*时间轴上的具体内容左侧箭头*/
  79. .vertical-timeline-content:before{
  80. content:'';
  81. width:0;
  82. height:0;
  84. border-top:10pxsolidtransparent;
  85. border-bottom:10pxsolidtransparent;
  86. border-right:10pxsolid#5bc0de;
  87. border-left:10pxsolidtransparent;
  89. position:absolute;
  90. right:100%;
  91. top:20px;
  92. }
  93. /*时间轴的具体内容的格式*/
  94. .timeline-content{
  95. text-indent:2em;
  96. }
  97. .time-more{
  98. overflow:hidden;
  99. }
  100. .time-more.time{
  101. float:left;
  102. line-height:40px;
  103. display:inline-block;
  104. }
  105. .time-more.more{
  106. float:right;
  107. }
  108. .time-more.morea{
  109. display:inline-block;
  110. height:20px;
  111. padding:8px15px;
  112. color:#FFF;
  113. text-decoration:none;
  114. font-size:15px;
  115. }
  116. /*“更多信息”的风格*/
  117. .more-style1{
  118. border-radius:5px;
  119. background-color:#565656;
  120. }
  121. .more-style1:hover{
  122. background-color:#696969;
  123. }
  124. .more-style2{
  125. border-radius:5px;
  126. background-color:#1AB394;
  127. }
  128. .more-style2:hover{
  129. background-color:#18A689;
  130. }
  132. .more-style3{
  133. border-radius:5px;
  134. background-color:#1C84C6;
  135. }
  136. .more-style3:hover{
  137. background-color:#1A7BB9;
  138. }
  140. </style>
  141. </head>
  142. <body>
  143. <divclass="container">
  144. <divclass="vertical-timeline">
  145. <divclass="vertical-timeline-block">
  146. <divclass="vertical-timeline-iconv-timeline-icon1">
  147. <iclass="icon">1</i>
  148. </div>
  150. <divclass="vertical-timeline-content">
  151. <h2>时间点1</h2>
  152. <pclass="timeline-content">我去吃了个午饭</p>
  153. <pclass="time-more">
  154. <spanclass="time">2016/4/3013:48</span>
  155. <spanclass="moremore-style1"><arel="nofollow noopener noreferrer" href="#">更多信息</a></span>
  156. </p>
  157. </div>
  158. </div>
  160. <divclass="vertical-timeline-block">
  161. <divclass="vertical-timeline-iconv-timeline-icon2">
  162. <iclass="icon">2</i>
  163. </div>
  165. <divclass="vertical-timeline-content">
  166. <h2>时间点2</h2>
  167. <pclass="timeline-content">我去吃了个午饭</p>
  168. <pclass="time-more">
  169. <spanclass="time">2016/4/3013:48</span>
  170. <spanclass="moremore-style2"><arel="nofollow noopener noreferrer" href="#">更多信息</a></span>
  171. </p>
  172. </div>
  173. </div>
  175. <divclass="vertical-timeline-block">
  176. <divclass="vertical-timeline-iconv-timeline-icon3">
  177. <iclass="icon">3</i>
  178. </div>
  180. <divclass="vertical-timeline-content">
  181. <h2>时间点3</h2>
  182. <pclass="timeline-content">我去吃了个午饭</p>
  183. <pclass="time-more">
  184. <spanclass="time">2016/4/3013:48</span>
  185. <spanclass="moremore-style3"><arel="nofollow noopener noreferrer" href="#">更多信息</a></span>
  186. </p>
  187. </div>
  188. </div>
  190. <divclass="vertical-timeline-block">
  191. <divclass="vertical-timeline-iconv-timeline-icon1">
  192. <iclass="icon">4</i>
  193. </div>
  195. <divclass="vertical-timeline-content">
  196. <h2>时间点1</h2>
  197. <h2>时间点1</h2>
  198. <h2>时间点1</h2>
  199. <h2>时间点1</h2>
  200. </div>
  201. </div>
  203. <divclass="vertical-timeline-block">
  204. <divclass="vertical-timeline-iconv-timeline-icon2">
  205. <iclass="icon">5</i>
  206. </div>
  208. <divclass="vertical-timeline-content">
  209. <h2>时间点1</h2>
  210. <h2>时间点1</h2>
  211. <h2>时间点1</h2>
  212. </div>
  213. </div>
  215. <divclass="vertical-timeline-block">
  216. <divclass="vertical-timeline-iconv-timeline-icon3">
  217. <iclass="icon">6</i>
  218. </div>
  220. <divclass="vertical-timeline-content">
  221. <h2>时间点1</h2>
  222. <h2>时间点1</h2>
  223. <h2>时间点1</h2>
  224. </div>
  225. </div>
  226. </div>
  227. </div>
  228. </body>
  229. </html>

以上就是本文的全部内容，希望对大家的学习有所帮助。

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例