HTML5响应式垂直时间轴

来源:https://www.sucaihuo.com/js/2728.html 2017-08-14 16:55浏览(2542) 收藏

一款HTML5响应式垂直时间轴,可以自由替换不同的图标内容,支持多个文本段落内容,可以添加无限的时间轴点,整体样式都可以自由调整,喜欢的童鞋请收下吧。
HTML5响应式垂直时间轴
分类:日期时间 > 时间轴 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的head部分,需远程调用bootstrap.min.css和font-awesome图标字体库,并引入本地的CSS样式文件,代码如下:

<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分,多个div容器分别放置不同的时间轴点的内容,需要增加时直接复制粘帖修改内容即可,代码如下:

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="main-timeline">
                <div class="timeline">
                    <div class="timeline-content">
                        <div class="circle"><span><i class="fa fa-globe"></i></span></div>
                        <div class="content">
                            <span class="year">2013 - 2014</span>
                            <h4 class="title">要求</h4>
                            <p class="description">第一个阶段,是做出要求,对宇宙发出指令,让宇宙了解你想要些什么,宇宙就会自动回应你的想法。</p>
                            <p class="description">这是一个很有意思的过程,就好比把宇宙当成一本货物的目录,你翻着它,然后决定“我要经历这个,我要那种东西,我要跟那种人一起生活”,你就是那个跟宇宙下订单的人。其实就是这样简单。</p>
                            <div class="icon"><span></span></div>
                        </div>
                    </div>
                </div>

                <div class="timeline">
                    <div class="timeline-content">
                        <div class="circle"><span><i class="fa fa-rocket"></i></span></div>
                        <div class="content">
                            <span class="year">2014 - 2015</span>
                            <h4 class="title">信念</h4>
                            <p class="description">第二步是信念。你要相信你已经拥有它了。要有一种毫不动摇的信念,就是我的说法,要相信还没有实现的事,“你的愿望就是我的命令”,宇宙就会开始运作安排,从而满足你心中的愿望。</p>
                            <p class="description">大多数的时候,假如我们要求的事物没有出现在生活中,我们会感到沮丧和失望,我们甚至会开始怀疑,这种怀疑会让人感到心灰意冷。接受这个感觉,然后用坚定的信念代替它:“我知道……我知道……我知道……,它就要实现了。”</p>
                            <div class="icon"><span></span></div>
                        </div>
                    </div>
                </div>

                <div class="timeline">
                    <div class="timeline-content">
                        <div class="circle"><span><i class="fa fa-briefcase"></i></span></div>
                        <div class="content">
                            <span class="year">2015 - 2016</span>
                            <h4 class="title">接受</h4>
                            <p class="description">第三步,就是这个过程最后一步,接受。开始感觉好极了,想想要是你想要的事物已经出现,那会是什么感觉。</p>
                            <p class="description">当你感觉好的时候,你就是把自己和你要的事物放在同一个频率上。尝试去做一切你能做的事,帮助自己具有拥有它们的感觉。无论你能做什么,只要去做,就有助于把这些东西吸引过来。</p>
                            <div class="icon"><span></span></div>
                        </div>
                    </div>
                </div>

                <div class="timeline">
                    <div class="timeline-content">
                        <div class="circle"><span><i class="fa fa-mobile"></i></span></div>
                        <div class="content">
                            <span class="year">2016 - 2017</span>
                            <h4 class="title">实现</h4>
                            <p class="description">当你看到结果的时候,你会大吃一惊的,这个方法居然真的有效哦!</p>
                            <p class="description">当你实现完一个梦想时,你会创造更多的梦想,朋友们,这将彻底改变你的人生!</p>
                            <div class="icon"><span></span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2