您现在的位置是：网站首页> 编程资料编程资料

网页中时光轴CSS实现_CSS教程_CSS_网页制作_

2023-11-11 391人已围观

简介 这篇文章为大家分享了CSS网页中时光轴的简单实现方法，记录每个时间段、时间点所发生的事情，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

效果图：

实现代码：

XML/HTML Code复制内容到剪贴板
  1. >     
  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. &

    上一篇：CSS3 3D位移translate效果实例介绍 _css3_CSS_网页制作_

    下一篇：CSS中height和min-height的区别_CSS教程_CSS_网页制作_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网