平武建站

使用CSS3怎么实现一个时间轴效果

这篇文章将为大家详细讲解有关使用CSS3怎么实现一个时间轴效果 ，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

成都创新互联是一家专注于成都网站建设、成都网站制作与策划设计,青河网站建设哪家好?成都创新互联做网站,专注于网站建设十载,网设计领域的专业建站公司;建站业务涵盖:青河等地区。青河做网站价格咨询:18980820575

什么是css

css是一种用来表现HTML或XML等文件样式的计算机语言，主要是用来设计网页的样式，使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言，并且css样式可以直接存储于HTML网页或者单独的样式单文件中，而样式规则的优先级由css根据这个层次结构决定，从而实现级联效果，发展至今，css不仅能装饰网页，也可以配合各种脚本对于网页进行格式化。

HTML结构：

XML/HTML Code复制内容到剪贴板

  1.   

  2.               

  3.                 

    2015-07-02

      

  4.                 

      

  5.                     

    暴走大事件第一季

      

  6.                     

        

    •   

    •                     

      

  7.                 

  

  •             

    •   

  •               

  •                 

    2015-07-02

      

  •                 

      

  •                     

    暴走大事件第二季

      

  •                     

        

    •   

    •                     

      

  •                 

    •   

    •     

  •   

    • 这里简化了一下HTML结构，.time类表示在右边，.timeLeft表示在左边，然后加点上外边距就可以了，每一块里面的内容我就删减掉了。
     
    CSS样式代码如下：

    CSS Code复制内容到剪贴板

    1. body{   

    2.                 background: #333;   

    3.             }   

    4.             h2{   

    5.                 text-align: center;   

    6.                 color:#fff;   

    7.             }   

    8.             .timezone{   

    9.                 width:6px;   

    10.                 height: 350px;   

    11.                 background: lightblue;   

    12.                 margin: 0 auto;   

    13.                 margin-top:50px;   

    14.                 border-radius: 3px;   

    15.                 position: relative;   

    16.                 -webkit-animation: heightSlide 2s linear;   

    17.             }   

    18.             @-webkit-keyframes heightSlide{   

    19.                 0%{   

    20.                     height: 0;   

    21.                 }   

    22.                 100%{   

    23.                     height: 350px;   

    24.                 }   

    25.             }   

    26.             .timezone:after{   

    27.                 content: '未完待续...';   

    28.                 width: 100px;   

    29.                 color:#fff;   

    30.                 position: absolute;   

    31.                 margin-left: -35px;   

    32.                 bottombottom: -30px;   

    33.                 -webkit-animation: showIn 4s ease;   

    34.             }   

    35.             .timezone .time,.timezone .timeLeft{   

    36.                 position: absolute;   

    37.                 margin-left: -10px;   

    38.                 margin-top:-10px;   

    39.                 width:20px;   

    40.                 height:20px;   

    41.                 border-radius: 50%;   

    42.                 border:4px solid rgba(255,255,255,0.5);   

    43.                 background: lightblue;   

    44.                 -webkit-transition: all 0.5s;   

    45.                 -webkit-animation: showIn ease;   

    46.             }   

    47.             .timezone .time:nth-child(1){   

    48.                 -webkit-animation-duration:1s;   

    49.             }   

    50.             .timezone .timeLeft:nth-child(2){   

    51.                 -webkit-animation-duration:1.5s;   

    52.             }   

    53.             .timezone .time:nth-child(3){   

    54.                 -webkit-animation-duration:2s;   

    55.             }   

    56.             .timezone .timeLeft:nth-child(4){   

    57.                 -webkit-animation-duration:2.5s;   

    58.             }   

    59.             @-webkit-keyframes showIn{   

    60.                 0%,70%{   

    61.                     opacity: 0;   

    62.                 }   

    63.                 100%{   

    64.                     opacity: 1;   

    65.                 }   

    66.             }   

    67.             .timezone .time h3,.timezone .timeLeft h3{   

    68.                 position: absolute;   

    69.                 margin-left: -120px;   

    70.                 margin-top: 3px;   

    71.                 color:#eee;   

    72.                 font-size: 14px;   

    73.                 cursor:pointer;   

    74.                 -webkit-animation: showIn 3s ease;   

    75.             }   

    76.             .timezone .timeLeft h3{   

    77.                 margin-left: 60px;   

    78.                 width: 100px;   

    79.             }   

    80.             .timezone .time:hover,.timezone .timeLeft:hover{   

    81.                 border:4px solid lightblue;   

    82.                 background: lemonchiffon;   

    83.                 box-shadow: 0 0 2px 2px rgba(255,255,255,0.4);   

    84.             }   

    85.             .timezone .time div,.timezone .timeLeft div{   

    86.                 position: absolute;   

    87.                 top:50%;   

    88.                 margin-top: -25px;   

    89.                 left:50px;   

    90.                 width: 300px;   

    91.                 height: 50px;   

    92.                 background: lightblue;   

    93.                 border:3px solid #eee;   

    94.                 border-radius: 10px;   

    95.                 z-index: 2;   

    96.                 overflow: hidden;   

    97.                 cursor:pointer;   

    98.                 -webkit-animation: showIn 3s ease;   

    99.                 -webkit-transition: all 0.5s;   

    100.             }   

    101.             .timezone .timeLeft div{   

    102.                 left:-337px;   

    103.             }   

    104.             .timezone .time div:hover,.timezone .timeLeft div:hover{   

    105.                 height: 170px;   

    106.             }   

    107.             .timezone .time div p,.timezone .timeLeft div p{   

    108.                 color: #fff;   

    109.                 font-weight: bold;   

    110.                 text-align: center;   

    111.             }   

    112.             .timezone .time:before,.timezone .timeLeft:before{   

    113.                 content: '';   

    114.                 position: absolute;   

    115.                 top:0px;   

    116.                 left: 32px;   

    117.                 width: 0px;   

    118.                 height: 0px;   

    119.                 border:10px solid transparent;   

    120.                 border-right:10px solid #eee;   

    121.                 z-index:-1;   

    122.                 -webkit-animation: showIn 3s ease;   

    123.             }   

    124.             .timezone .timeLeft:before{   

    125.                 left:-33px;   

    126.                 border:10px solid transparent;   

    127.                 border-left:10px solid #eee;   

    128.             }   

    129.             .timezone .time div ul,.timezone .timeLeft div ul{   

    130.                 list-style: none;   

    131.                 width:300px;   

    132.                 padding:5px 0 0;   

    133.                 border-top:2px solid #eee;   

    134.                 color:#fff;   

    135.                 text-align: center;   

    136.             }   

    137.             .timezone .time div li,.timezone .timeLeft div li{   

    138.                 display: inline-block;   

    139.                 height: 25px;   

    140.                 line-height: 25px;   

    141.             }    

    142.   

    关于使用CSS3怎么实现一个时间轴效果 就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。


    当前文章：使用CSS3怎么实现一个时间轴效果
    网页链接：http://pwwzsj.com/article/pjhoce.html

    其他资讯