首页 > > 网页制作 > css >

如何实现CSS网页的时光轴效果

2019-08-14 09:38:36来源：爱站网 阅读 ()

新老客户大回馈,云服务器低至5折

如何实现网页中的时光轴效果？时光轴可以记录每个时间段、时间点所发生的事情，以下内容是css网页中时光轴的实现方法，感兴趣的朋友们来看看吧。

效果图：

实现代码：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE?html>?? ??
  2. <html?lang="en">?? ??
  3. <head>?? ??
  4. ????<meta?charset="UTF-8">?? ??
  5. ????<title>时光轴</title>?? ??
  6. ????<style>?? ??
  7. ????????.container?{?? ??
  8. ????????????width:?800px;?? ??
  9. ????????????margin:?50px?auto;?? ??
  10. ????????}?? ??
  11. ?? ??
  12. ????????.vertical-timeline?{?? ??
  13. ????????????color:?#FFF;?? ??
  14. ????????????font-family:?"微软雅黑",?"Microsoft?YaHei";?? ??
  15. ????????}?? ??
  16. ?? ??
  17. ????????.vertical-timeline-block?{?? ??
  18. ????????????width:?100%;?? ??
  19. ????????????border-left:?2px?solid?#DDD;?? ??
  20. ????????????margin:?0?20px;?? ??
  21. ????????????position:?relative;?? ??
  22. ????????????padding-bottom:?30px;?? ??
  23. ????????}?? ??
  24. ?? ??
  25. ????????/*?时间轴的左侧图标?*/?? ??
  26. ????????.vertical-timeline-icon?{?? ??
  27. ????????????width:?40px;?? ??
  28. ????????????height:?40px;?? ??
  29. ????????????border-radius:?20px;?? ??
  30. ????????????position:?absolute;?? ??
  31. ????????????left:?-22px;?? ??
  32. ????????????top:?10px;?? ??
  33. ?? ??
  34. ????????????text-align:?center;?? ??
  35. ????????????line-height:?40px;?? ??
  36. ????????????cursor:?pointer;?? ??
  37. ????????????transition:?all?0.2s?ease-in;?? ??
  38. ????????????-webkit-transition:?all?0.2s?ease-in;?? ??
  39. ????????????-moz-transition:?all?0.2s?ease-in;?? ??
  40. ????????????-o-transition:?all?0.2s?ease-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:?0?0?5px?#CCC;?? ??
  52. ????????????font-size:?25px;?? ??
  53. ????????}?? ??
  54. ?? ??
  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-icon?i?{?? ??
  67. ????????????font-style:?normal;?? ??
  68. ????????????color:?#FFF;?? ??
  69. ????????}?? ??
  70. ????????/*?时间轴上的具体内容?*/?? ??
  71. ????????.vertical-timeline-content?{?? ??
  72. ????????????background-color:?#5bc0de;?? ??
  73. ????????????margin-left:?60px;?? ??
  74. ????????????padding:?20px?30px;?? ??
  75. ????????????border-radius:?5px;?? ??
  76. ????????????position:?relative;?? ??
  77. ????????}?? ??
  78. ????????/*?时间轴上的具体内容左侧箭头?*/?? ??
  79. ????????.vertical-timeline-content:before?{?? ??
  80. ????????????content:?'';?? ??
  81. ????????????width:?0;?? ??
  82. ????????????height:?0;?? ??
  83. ?? ??
  84. ????????????border-top:?10px?solid?transparent;?? ??
  85. ????????????border-bottom:?10px?solid?transparent;?? ??
  86. ????????????border-right:?10px?solid?#5bc0de;?? ??
  87. ????????????border-left:?10px?solid?transparent;?? ??
  88. ?? ??
  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?.more?a?{?? ??
  109. ????????????display:?inline-block;?? ??
  110. ????????????height:?20px;?? ??
  111. ????????????padding:?8px?15px;?? ??
  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. ????????}?? ??
  131. ?? ??
  132. ????????.more-style3?{?? ??
  133. ????????????border-radius:?5px;?? ??
  134. ????????????background-color:?#1C84C6;?? ??
  135. ????????}?? ??
  136. ????????.more-style3:hover?{?? ??
  137. ????????????background-color:?#1A7BB9;?? ??
  138. ????????}?? ??
  139. ?? ??
  140. ????</style>?? ??
  141. </head>?? ??
  142. <body>?? ??
  143. ????<div?class="container">?? ??
  144. ????????<div?class="vertical-timeline">?? ??
  145. ????????????<div?class="vertical-timeline-block">?? ??
  146. ????????????????<div?class="vertical-timeline-icon?v-timeline-icon1">?? ??
  147. ????????????????????<i?class="icon">1</i>?? ??
  148. ????????????????</div>?? ??
  149. ?? ??
  150. ????????????????<div?class="vertical-timeline-content">?? ??
  151. ????????????????????<h2>时间点1</h2>?? ??
  152. ????????????????????<p?class="timeline-content">我去吃了个午饭</p>?? ??
  153. ????????????????????<p?class="time-more">?? ??
  154. ????????????????????????<span?class="time">2016/4/30?13:48</span>?? ??
  155. ????????????????????????<span?class="more?more-style1"><a?href="#">更多信息</a></span>?? ??
  156. ????????????????????</p>?? ??
  157. ????????????????</div>?? ??
  158. ????????????</div>?? ??
  159. ?? ??
  160. ????????????<div?class="vertical-timeline-block">?? ??
  161. ????????????????<div?class="vertical-timeline-icon?v-timeline-icon2">?? ??
  162. ????????????????????<i?class="icon">2</i>?? ??
  163. ????????????????</div>?? ??
  164. ?? ??
  165. ????????????????<div?class="vertical-timeline-content">?? ??
  166. ????????????????????<h2>时间点2</h2>?? ??
  167. ????????????????????<p?class="timeline-content">我去吃了个午饭</p>?? ??
  168. ????????????????????<p?class="time-more">?? ??
  169. ????????????????????????<span?class="time">2016/4/30?13:48</span>?? ??
  170. ????????????????????????<span?class="more?more-style2"><a?href="#">更多信息</a></span>?? ??
  171. ????????????????????</p>?? ??
  172. ????????????????</div>?? ??
  173. ????????????</div>?? ??
  174. ?? ??
  175. ????????????<div?class="vertical-timeline-block">?? ??
  176. ????????????????<div?class="vertical-timeline-icon?v-timeline-icon3">?? ??
  177. ????????????????????<i?class="icon">3</i>?? ??
  178. ????????????????</div>?? ??
  179. ?? ??
  180. ????????????????<div?class="vertical-timeline-content">?? ??
  181. ????????????????????<h2>时间点3</h2>?? ??
  182. ????????????????????<p?class="timeline-content">我去吃了个午饭</p>?? ??
  183. ????????????????????<p?class="time-more">?? ??
  184. ????????????????????????<span?class="time">2016/4/30?13:48</span>?? ??
  185. ????????????????????????<span?class="more?more-style3"><a?href="#">更多信息</a></span>?? ??
  186. ????????????????????</p>?? ??
  187. ????????????????</div>?? ??
  188. ????????????</div>?? ??
  189. ?? ??
  190. ????????????<div?class="vertical-timeline-block">?? ??
  191. ????????????????<div?class="vertical-timeline-icon?v-timeline-icon1">?? ??
  192. ????????????????????<i?class="icon">4</i>?? ??
  193. ????????????????</div>?? ??
  194. ?? ??
  195. ????????????????<div?class="vertical-timeline-content">?? ??
  196. ????????????????????<h2>时间点1</h2>?? ??
  197. ????????????????????<h2>时间点1</h2>?? ??
  198. ????????????????????<h2>时间点1</h2>?? ??
  199. ????????????????????<h2>时间点1</h2>?? ??
  200. ????????????????</div>?? ??
  201. ????????????</div>?? ??
  202. ?? ??
  203. ????????????<div?class="vertical-timeline-block">?? ??
  204. ????????????????<div?class="vertical-timeline-icon?v-timeline-icon2">?? ??
  205. ????????????????????<i?class="icon">5</i>?? ??
  206. ????????????????</div>?? ??
  207. ?? ??
  208. ????????????????<div?class="vertical-timeline-content">?? ??
  209. ????????????????????<h2>时间点1</h2>?? ??
  210. ????????????????????<h2>时间点1</h2>?? ??
  211. ????????????????????<h2>时间点1</h2>?? ??
  212. ????????????????</div>?? ??
  213. ????????????</div>?? ??
  214. ?? ??
  215. ????????????<div?class="vertical-timeline-block">?? ??
  216. ????????????????<div?class="vertical-timeline-icon?v-timeline-icon3">?? ??
  217. ????????????????????<i?class="icon">6</i>?? ??
  218. ????????????????</div>?? ??
  219. ?? ??
  220. ????????????????<div?class="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>??

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


原文链接:https://js.aizhan.com/web_authoring/css/6186.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：网页文本渐变的教程

下一篇：CSS兼容的技巧

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签