使用CSS3实现简单时间轴效果的案例

这篇文章主要为大家展示了使用css3实现简单时间轴效果的案例，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带大家一起来研究并学习一下“使用CSS3实现简单时间轴效果的案例”这篇文章吧。

css是什么意思

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

最近打开电脑就能看到一个实战路径图页面，效果是这样的：

有点像时间轴的赶脚，而且每一块鼠标悬浮上去也有下拉效果展开介绍截图信息，就感觉效果还不错。但感觉这种效果貌似对于动态添加不是很灵活，因为高度不像宽度可以灵活的自适应，故添加得自己一个一个设置。所以很多都是做成展示效果。

当然啦，自己也基于它的这个想法搞了一点简单点的类似效果，主要还是整个布局效果，具体每一块内容就不仿造了，而且我自己也加了一下开场动画，让它更好玩一些…

先来看看效果吧：

大概效果就是这样啦，下来废话不说，还是直接进入主题：

HTML结构：

<div class="timezone">            <div class="time">                <h3>2015-07-02</h3>                <div>                    <p>暴走大事件第一季</p>                    <ul>                    </ul>                </div>            </div>            <div class="timeLeft" style="top: 100px;">                <h3>2015-07-02</h3>                <div>                    <p>暴走大事件第二季</p>                    <ul>                    </ul>                </div></div>

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

CSS样式代码如下：

body{                background: #333;            }            h2{                text-align: center;                color:#fff;            }            .timezone{                width:6px;                height: 350px;                background: lightblue;                margin: 0 auto;                margin-top:50px;                border-radius: 3px;                position: relative;                -WEBkit-animation: heightSlide 2s linear;            }            @-webkit-keyframes heightSlide{                0%{                    height: 0;                }                100%{                    height: 350px;                }            }            .timezone:after{                content: '未完待续...';                width: 100px;                color:#fff;                position: absolute;                margin-left: -35px;                bottom: -30px;                -webkit-animation: showIn 4s ease;            }            .timezone .time,.timezone .timeLeft{                position: absolute;                margin-left: -10px;                margin-top:-10px;                width:20px;                height:20px;                border-radius: 50%;                border:4px solid rgba(255,255,255,0.5);                background: lightblue;                -webkit-transition: all 0.5s;                -webkit-animation: showIn ease;            }            .timezone .time:nth-child(1){                -webkit-animation-duration:1s;            }            .timezone .timeLeft:nth-child(2){                -webkit-animation-duration:1.5s;            }            .timezone .time:nth-child(3){                -webkit-animation-duration:2s;            }            .timezone .timeLeft:nth-child(4){                -webkit-animation-duration:2.5s;            }            @-webkit-keyframes showIn{                0%,70%{                    opacity: 0;                }                100%{                    opacity: 1;                }            }            .timezone .time h3,.timezone .timeLeft h3{                position: absolute;                margin-left: -120px;                margin-top: 3px;                color:#eee;                font-size: 14px;                cursor:pointer;                -webkit-animation: showIn 3s ease;            }            .timezone .timeLeft h3{                margin-left: 60px;                width: 100px;            }            .timezone .time:hover,.timezone .timeLeft:hover{                border:4px solid lightblue;                background: lemonchiffon;                box-shadow: 0 0 2px 2px rgba(255,255,255,0.4);            }            .timezone .time div,.timezone .timeLeft div{                position: absolute;                top:50%;                margin-top: -25px;                left:50px;                width: 300px;                height: 50px;                background: lightblue;                border:3px solid #eee;                border-radius: 10px;                z-index: 2;                overflow: hidden;                cursor:pointer;                -webkit-animation: showIn 3s ease;                -webkit-transition: all 0.5s;            }            .timezone .timeLeft div{                left:-337px;            }            .timezone .time div:hover,.timezone .timeLeft div:hover{                height: 170px;            }            .timezone .time div p,.timezone .timeLeft div p{                color: #fff;                font-weight: bold;                text-align: center;            }            .timezone .time:before,.timezone .timeLeft:before{                content: '';                position: absolute;                top:0px;                left: 32px;                width: 0px;                height: 0px;                border:10px solid transparent;                border-right:10px solid #eee;                z-index:-1;                -webkit-animation: showIn 3s ease;            }            .timezone .timeLeft:before{                left:-33px;                border:10px solid transparent;                border-left:10px solid #eee;            }            .timezone .time div ul,.timezone .timeLeft div ul{                list-style: none;                width:300px;                padding:5px 0 0;                border-top:2px solid #eee;                color:#fff;                text-align: center;            }            .timezone .time div li,.timezone .timeLeft div li{                display: inline-block;                height: 25px;                line-height: 25px;            }

以上就是关于“使用CSS3实现简单时间轴效果的案例”的内容，如果改文章对你有所帮助并觉得写得不错，劳请分享给你的好友一起学习新知识，若想了解更多相关知识内容，请多多关注编程网精选频道。