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 3D位移translate效果实例介绍
May 03 HTML / CSS
举例详解CSS3中的Transition
Jul 15 HTML / CSS
CSS3条纹背景制作的实战攻略
May 31 HTML / CSS
CSS3实现10种Loading效果
Jul 11 HTML / CSS
CSS3实现可翻转的hover效果
May 23 HTML / CSS
CSS3实现王者匹配时的粒子动画效果
Apr 12 HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
Mar 08 HTML / CSS
W3C公布最新的HTML5标准草案
Oct 17 HTML / CSS
HTML5 placeholder(空白提示)属性介绍
Aug 07 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
May 07 HTML / CSS
html5简介_动力节点Java学院整理
Jul 07 HTML / CSS
CSS3 制作的彩虹按钮样式
Apr 11 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性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
关于URL最大长度限制的相关资料查证
2014/12/23 PHP
Cygwin中安装PHP方法步骤
2015/07/04 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
修改yii2.0用户登录使用的user表为其它的表实现方法(推荐)
2017/08/01 PHP
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
jquery.lazyload  实现图片延迟加载jquery插件
2010/02/06 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
jquery 通过name快速取值示例
2014/01/24 Javascript
JavaScript事件委托用法分析
2015/01/24 Javascript
jQuery源码分析之Callbacks详解
2015/03/13 Javascript
BootStrap selectpicker
2016/06/20 Javascript
JS基础随笔(菜鸟必看篇)
2016/07/13 Javascript
浅谈angular懒加载的一些坑
2016/08/20 Javascript
利用Node.js+Koa框架实现前后端交互的方法
2017/02/27 Javascript
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
示例vue 的keep-alive缓存功能的实现
2018/12/13 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
解决 window.onload 被覆盖的问题方法
2020/01/14 Javascript
Python基于DES算法加密解密实例
2015/06/03 Python
通过mod_python配置运行在Apache上的Django框架
2015/07/22 Python
利用Python为iOS10生成图标和截屏
2016/09/24 Python
在Python文件中指定Python解释器的方法
2019/02/18 Python
numpy.random模块用法总结
2019/05/27 Python
Pytorch保存模型用于测试和用于继续训练的区别详解
2020/01/10 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
python+django+selenium搭建简易自动化测试
2020/08/19 Python
Pandas的数据过滤实现
2021/01/15 Python
python3中celery异步框架简单使用+守护进程方式启动
2021/01/20 Python
利用CSS3实现圆角的outline效果的教程
2015/06/05 HTML / CSS
水果花束:Fruit Bouquets
2017/12/20 全球购物
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
2014年教师党员自我评议
2014/09/19 职场文书
基于Python实现流星雨效果的绘制
2022/03/18 Python