资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

使用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://cdkjz.cn/article/pjhoce.html
    返回首页 了解更多建站资讯

    相关资讯

    多年建站经验

    多一份参考，总有益处

    联系快上网，免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈，可以通过以下方式与我们联系

    大客户专线   成都：13518219792   座机：028-86922220

    在线咨询 提交需求
    友情链接 交换友情链接
    重庆电信五里店机房成都网站制作梦港之夜迷你发光字普格博源建站成都微信小程序开发无边发光字厂家商城网站电信内江机房达州网站制作

    成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

    成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

    专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图