开心学习
当前位置：Web前端 > > 正文

css时钟（网页中时光轴CSS实现）

时间：2022-01-20 00:36:33类别：Web前端

css时钟

网页中时光轴CSS实现

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

效果图：

css时钟（网页中时光轴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.     <li class="container">     
    144.         <li class="vertical-timeline">     
    145.             <li class="vertical-timeline-block">     
    146.                 <li class="vertical-timeline-icon v-timeline-icon1">     
    147.                     <i class="icon">1</i>     
    148.                 </li>     
    149.      
    150.                 <li 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.                 </li>     
    158.             </li>     
    159.      
    160.             <li class="vertical-timeline-block">     
    161.                 <li class="vertical-timeline-icon v-timeline-icon2">     
    162.                     <i class="icon">2</i>     
    163.                 </li>     
    164.      
    165.                 <li 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.                 </li>     
    173.             </li>     
    174.      
    175.             <li class="vertical-timeline-block">     
    176.                 <li class="vertical-timeline-icon v-timeline-icon3">     
    177.                     <i class="icon">3</i>     
    178.                 </li>     
    179.      
    180.                 <li 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.                 </li>     
    188.             </li>     
    189.      
    190.             <li class="vertical-timeline-block">     
    191.                 <li class="vertical-timeline-icon v-timeline-icon1">     
    192.                     <i class="icon">4</i>     
    193.                 </li>     
    194.      
    195.                 <li class="vertical-timeline-content">     
    196.                     <h2>时间点1</h2>     
    197.                     <h2>时间点1</h2>     
    198.                     <h2>时间点1</h2>     
    199.                     <h2>时间点1</h2>     
    200.                 </li>     
    201.             </li>     
    202.      
    203.             <li class="vertical-timeline-block">     
    204.                 <li class="vertical-timeline-icon v-timeline-icon2">     
    205.                     <i class="icon">5</i>     
    206.                 </li>     
    207.      
    208.                 <li class="vertical-timeline-content">     
    209.                     <h2>时间点1</h2>     
    210.                     <h2>时间点1</h2>     
    211.                     <h2>时间点1</h2>     
    212.                 </li>     
    213.             </li>     
    214.      
    215.             <li class="vertical-timeline-block">     
    216.                 <li class="vertical-timeline-icon v-timeline-icon3">     
    217.                     <i class="icon">6</i>     
    218.                 </li>     
    219.      
    220.                 <li class="vertical-timeline-content">     
    221.                     <h2>时间点1</h2>     
    222.                     <h2>时间点1</h2>     
    223.                     <h2>时间点1</h2>     
    224.                 </li>     
    225.             </li>     
    226.         </li>     
    227.     </li>     
    228. </body>     
    229. </html>  

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

    标签：
    时光轴 css
    上一篇下一篇

    猜您喜欢

    热门推荐

    © 2021 开心学习