CSS3实现时间轴特效


Posted in HTML / CSS onNovember 02, 2020

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

CSS3实现时间轴特效

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

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

先来看看效果吧:

CSS3实现时间轴特效

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

HTML结构:

<div class="timezone">
            <div class="time">
                <h2>2015-07-02</h2>
                <div>
                    <p>暴走大事件第一季</p>
                    <ul>

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

                    </ul>
                </div>
</div>

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

CSS样式代码如下:

body{
                background: #333;
            }
            h1{
                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 h2,.timezone .timeLeft h2{
                position: absolute;
                margin-left: -120px;
                margin-top: 3px;
                color:#eee;
                font-size: 14px;
                cursor:pointer;
                -webkit-animation: showIn 3s ease;
            }
            .timezone .timeLeft h2{
                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;
            }

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

原文链接:https://www.cnblogs.com/jr1993/p/4779678.html

以上就是CSS3实现时间轴特效的详细内容,更多关于CSS3 时间轴特效的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
CSS3中利用animation属性创建雪花飘落特效
May 14 HTML / CSS
分享CSS3制作卡片式图片的方法
Jul 08 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
Jun 01 HTML / CSS
详解HTML5中的标签
Jun 19 HTML / CSS
HTML5中Localstorage的使用教程
Jul 09 HTML / CSS
极简的HTML5模版
Jul 09 HTML / CSS
浅析HTML5中header标签的用法
Jun 24 HTML / CSS
HTML5学习心得总结(推荐)
Jul 08 HTML / CSS
详解html5 shiv.js和respond.min.js
Jan 24 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
Jun 11 HTML / CSS
amazeui页面分析之登录页面的示例代码
Aug 25 HTML / CSS
div与span之间的区别与使用介绍
Dec 06 HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
Nov 02 #HTML / CSS
详解background属性的8个属性值(面试题)
Nov 02 #HTML / CSS
css3实现二维码扫描特效的示例
Oct 29 #HTML / CSS
CSS3实现彩色进度条动画的示例
Oct 29 #HTML / CSS
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
Oct 29 #HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 #HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
Oct 28 #HTML / CSS
You might like
PHP下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
自定义Laravel (monolog)日志位置,并增加请求ID的实现
2019/10/17 PHP
javascript 数组学习资料收集
2010/04/11 Javascript
JavaScript中的prototype和constructor简明总结
2014/04/05 Javascript
jQuery插件bxSlider实现响应式焦点图
2015/04/12 Javascript
javascript实现自动填写表单实例简析
2015/12/02 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
jQuery中DOM节点删除之empty与remove
2017/01/20 Javascript
简单谈谈gulp-changed插件
2017/02/21 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
nodejs实现大文件(在线视频)的读取
2020/10/16 NodeJs
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
2018/08/08 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
2020/09/21 Javascript
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
使用jquery实现轮播图效果
2021/01/02 jQuery
Python版微信红包分配算法
2015/05/04 Python
Python如何实现MySQL实例初始化详解
2017/11/06 Python
python3+PyQt5 数据库编程--增删改实例
2019/06/17 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
Django ORM 常用字段与不常用字段汇总
2019/08/09 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
2010/07/20 HTML / CSS
英国第一职业高尔夫商店:Clickgolf.co.uk
2020/11/18 全球购物
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
航空大学应届生求职信
2013/11/10 职场文书
工作室成员个人发展规划范文
2014/01/24 职场文书
办公室文员工作职责
2014/01/31 职场文书
颁奖晚会主持词
2014/03/25 职场文书
单位活动策划方案
2014/08/17 职场文书
教师个人考察材料
2014/12/16 职场文书
创业计划书之美容店
2019/09/16 职场文书
Python IO文件管理的具体使用
2022/03/20 Python
如何利用python实现列表嵌套字典取值
2022/06/10 Python