CSS3实现时间轴效果


Posted in HTML / CSS onJuly 11, 2016

最近打开电脑就能看到极客学院什么新用户vip免费一个月,就进去看看咯,这里就不说它的课程怎么滴了,里面实战路径图页面看到了这个效果: 

CSS3实现时间轴效果

有点像时间轴的赶脚,而且每一块鼠标悬浮上去也有下拉效果展开介绍截图信息,就感觉效果还不错。但感觉这种效果貌似对于动态添加不是很灵活,因为高度不像宽度可以灵活的自适应,故添加得自己一个一个设置。所以很多都是做成展示效果。
 
当然啦,自己也基于它的这个想法搞了一点简单点的类似效果,主要还是整个布局效果,具体每一块内容就不仿造了,而且我自己也加了一下开场动画,让它更好玩一些…
 
先来看看效果吧: 

CSS3实现时间轴效果

大概效果就是这样啦,下来废话不说,还是直接进入主题:
 
HTML结构:

XML/HTML Code复制内容到剪贴板
  1. <div class="timezone">  
  2.             <div class="time">  
  3.                 <h2>2015-07-02</h2>  
  4.                 <div>  
  5.                     <p>暴走大事件第一季</p>  
  6.                     <ul>  
  7.   
  8.                     </ul>  
  9.                 </div>  
  10.             </div>  
  11.             <div class="timeLeft" style="top: 100px;">  
  12.                 <h2>2015-07-02</h2>  
  13.                 <div>  
  14.                     <p>暴走大事件第二季</p>  
  15.                     <ul>  
  16.   
  17.                     </ul>  
  18.                 </div>  
  19. </div>    
  20.   

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

CSS Code复制内容到剪贴板
  1. body{   
  2.                 background#333;   
  3.             }   
  4.             h1{   
  5.                 text-aligncenter;   
  6.                 color:#fff;   
  7.             }   
  8.             .timezone{   
  9.                 width:6px;   
  10.                 height350px;   
  11.                 background: lightblue;   
  12.                 margin: 0 auto;   
  13.                 margin-top:50px;   
  14.                 border-radius: 3px;   
  15.                 positionrelative;   
  16.                 -webkit-animation: heightSlide 2s linear;   
  17.             }   
  18.             @-webkit-keyframes heightSlide{   
  19.                 0%{   
  20.                     height: 0;   
  21.                 }   
  22.                 100%{   
  23.                     height350px;   
  24.                 }   
  25.             }   
  26.             .timezone:after{   
  27.                 content'未完待续...';   
  28.                 width100px;   
  29.                 color:#fff;   
  30.                 positionabsolute;   
  31.                 margin-left: -35px;   
  32.                 bottombottom: -30px;   
  33.                 -webkit-animation: showIn 4s ease;   
  34.             }   
  35.             .timezone .time,.timezone .timeLeft{   
  36.                 positionabsolute;   
  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 h2,.timezone .timeLeft h2{   
  68.                 positionabsolute;   
  69.                 margin-left: -120px;   
  70.                 margin-top3px;   
  71.                 color:#eee;   
  72.                 font-size14px;   
  73.                 cursor:pointer;   
  74.                 -webkit-animation: showIn 3s ease;   
  75.             }   
  76.             .timezone .timeLeft h2{   
  77.                 margin-left60px;   
  78.                 width100px;   
  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.                 positionabsolute;   
  87.                 top:50%;   
  88.                 margin-top: -25px;   
  89.                 left:50px;   
  90.                 width300px;   
  91.                 height50px;   
  92.                 background: lightblue;   
  93.                 border:3px solid #eee;   
  94.                 border-radius: 10px;   
  95.                 z-index: 2;   
  96.                 overflowhidden;   
  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.                 height170px;   
  106.             }   
  107.             .timezone .time div p,.timezone .timeLeft div p{   
  108.                 color#fff;   
  109.                 font-weightbold;   
  110.                 text-aligncenter;   
  111.             }   
  112.             .timezone .time:before,.timezone .timeLeft:before{   
  113.                 content'';   
  114.                 positionabsolute;   
  115.                 top:0px;   
  116.                 left32px;   
  117.                 width0px;   
  118.                 height0px;   
  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-stylenone;   
  131.                 width:300px;   
  132.                 padding:5px 0 0;   
  133.                 border-top:2px solid #eee;   
  134.                 color:#fff;   
  135.                 text-aligncenter;   
  136.             }   
  137.             .timezone .time div li,.timezone .timeLeft div li{   
  138.                 displayinline-block;   
  139.                 height25px;   
  140.                 line-height25px;   
  141.             }    
  142.   

此CSS样式代码仅供参考,实用性不是很强,而且同样没有怎么整理过,主要还是理解一下动画效果还有整体布局吧。祝好!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

原文链接:http://www.cnblogs.com/jr1993/p/4626815.html

HTML / CSS 相关文章推荐
css3的transform中scale缩放详解
Dec 08 HTML / CSS
用CSS3实现背景渐变的方法
Jul 14 HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
Apr 11 HTML / CSS
IE10 Error.stack 让脚本调试更加方便快捷
Apr 22 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
Jun 23 HTML / CSS
HTML5 Convas APIs方法详解
Apr 24 HTML / CSS
详解HTML5中的Communication API基本使用方法
Jan 29 HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
Sep 12 HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
Feb 18 HTML / CSS
手把手教你实现一个canvas智绘画板的方法
Mar 04 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
May 19 HTML / CSS
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
Mar 31 HTML / CSS
CSS3实现10种Loading效果
Jul 11 #HTML / CSS
CSS3实现可爱的小黄人动画
Jul 11 #HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
Jul 08 #HTML / CSS
分享CSS3制作卡片式图片的方法
Jul 08 #HTML / CSS
CSS3制作缩略图的详细过程
Jul 08 #HTML / CSS
CSS3制作圆角图片和椭圆形图片
Jul 08 #HTML / CSS
css3media响应式布局实例
Jul 08 #HTML / CSS
You might like
PHP5中MVC结构学习
2006/10/09 PHP
thinkphp学习笔记之多表查询
2014/07/28 PHP
PHP中static关键字以及与self关键字的区别
2015/07/01 PHP
标准版Eclipse搭建PHP环境的详细步骤
2015/11/18 PHP
js计数器代码
2006/11/04 Javascript
JavaScript 学习笔记(六)
2009/12/31 Javascript
Jquery 插件学习实例1 插件制作说明与tableUI优化
2010/04/02 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
简短几句 通俗解释javascript的闭包
2011/01/17 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
文本框回车提交与禁止提交示例
2013/09/27 Javascript
javascript去掉前后空格的实例
2013/11/07 Javascript
jquery实现网页查找功能示例分享
2014/02/12 Javascript
jquery.form.js用法之清空form的方法
2014/03/07 Javascript
jquery等待效果示例
2014/05/01 Javascript
JavaScript里四舍五入函数round用法实例
2015/04/06 Javascript
jQuery中extend函数详解
2015/07/13 Javascript
FullCalendar日历插件应用之数据展现(一)
2015/12/23 Javascript
JS组件Bootstrap Select2使用方法解析
2016/05/30 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
2017/03/31 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
Python模拟登录12306的方法
2014/12/30 Python
Python中的Classes和Metaclasses详解
2015/04/02 Python
python爬虫系列Selenium定向爬取虎扑篮球图片详解
2017/11/15 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
复化梯形求积分实例——用Python进行数值计算
2019/11/20 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
用 python 进行微信好友信息分析
2020/11/28 Python
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
4s客服专员岗位职责
2013/12/01 职场文书
党员学习中共十八大报告思想汇报
2014/09/15 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书