仅用css实现时间轴（动画版）

前言

提到时间轴，相信大家都知道时间轴可以系统、完整的记录某一领域的发展足迹和详细事迹，依据时间顺序，把一方面或多方面的事件串联起来，形成相对完整的记录体系，再运用图文的形式呈现给用户。恰好最近刚做完一个关于时间轴的小模块，下面分享给大家。

实现思路

每次添加事件要调整标签中 top 的距离，每次递增；
每次添加事件要调整动画的时长，呈现均衡的效果；
每次添加事件要增加竖线的高度，根据自己需求而定。

源码如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>时间轴</title>
</head><body><!-- 最外层的盒子 --><div class="outerBox"><!-- 第一大块 --><!-- 左边整体的内容 --><div class="dateBox"><h2>2021/12/31</h2><div><p>发生的事件</p><ul>事件的详细内容事件的详细内容事件的详细内容事件的详细内容事件的详细内容</ul></div></div><!-- 右边整体的内容 --><div class="dateLeftBox" style="top: 120px;"><h2>2021/12/25</h2><div><p>发生的事件</p><ul>事件的详细内容</ul></div></div><!-- 第二大块 --><!-- 左边整体的内容 --><div class="dateBox" style="top: 240px;"><h2>2021/12/23</h2><div><p>发生的事件</p><ul>事件的详细内容</ul></div></div><!-- 右边整体的内容 --><div class="dateLeftBox" style="top: 360px;"><h2>2021/12/13</h2><div><p>发生的事件</p><ul>事件的详细内容</ul></div></div><!-- 第三大块 --><!-- 左边整体的内容 --><div class="dateBox" style="top: 480px;"><h2>2020/12/23</h2><div><p>发生的事件</p><ul>事件的详细内容</ul></div></div><!-- 右边整体的内容 --><div class="dateLeftBox" style="top: 600px;"><h2>2020/05/14</h2><div><p>发生的事件</p><ul>事件的详细内容</ul></div></div><!-- 第四大块 --><!-- 左边整体的内容 --><div class="dateBox" style="top: 720px;"><h2>2020/12/23</h2><div><p>发生的事件</p><ul>事件的详细内容</ul></div></div><!-- 右边整体的内容 --><div class="dateLeftBox" style="top: 840px;"><h2>2020/05/14</h2><div><p>发生的事件</p><ul>事件的详细内容</ul></div></div></div>
</body>
<style>* {padding: 0;margin: 0;}.outerBox {/* 竖线样式 高度根据事件的多少调整*/width: 5px;height: 900px;background: rgb(221, 221, 221);margin: 40px auto;position: relative;-webkit-animation: heightSlide 2s linear;}@-webkit-keyframes heightSlide {/* 竖线的动画效果：以百分比来规定改变发生的时间，0% 是动画的开始时间，100% 动画的结束时间 */0% {height: 0;}100% {height: 900px;}}.outerBox:after {/* 竖线末尾文字样式 */content: '未完待续...';width: 100px;color: rgb(84, 84, 85);position: absolute;margin-left: -47px;text-align: center;bottom: -30px;-webkit-animation: showIn 5.5s ease;}.outerBox .dateBox,.outerBox .dateLeftBox {/* 球球的样式 */position: absolute;margin-left: -8px;margin-top: -10px;width: 12px;height: 12px;border-radius: 50%;border: 4px solid rgb(221, 221, 221);background: rgb(31, 122, 252);-webkit-transition: all 0.5s;-webkit-animation: showIn ease;}.outerBox .dateBox:nth-child(1) {/* 第一个事件 设置动画在几秒内完成 */-webkit-animation-duration: 1s;}.outerBox .dateLeftBox:nth-child(2) {/* 第二个事件 设置动画在几秒内完成 */-webkit-animation-duration: 1.5s;}.outerBox .dateBox:nth-child(3) {/* 第三个事件 设置动画在几秒内完成 */-webkit-animation-duration: 2s;}.outerBox .dateLeftBox:nth-child(4) {/* 第四个事件 设置动画在几秒内完成 */-webkit-animation-duration: 2.5s;}.outerBox .dateBox:nth-child(5) {/* 第五个事件 设置动画在几秒内完成 */-webkit-animation-duration: 3s;}.outerBox .dateLeftBox:nth-child(6) {/* 第六个事件 设置动画在几秒内完成 */-webkit-animation-duration: 3.5s;}.outerBox .dateBox:nth-child(7) {/* 第七个事件 设置动画在几秒内完成 */-webkit-animation-duration: 4s;}.outerBox .dateLeftBox:nth-child(8) {/* 第八个事件 设置动画在几秒内完成 */-webkit-animation-duration: 4.5s;}@-webkit-keyframes showIn {/* 球球、竖线、左右的模块的动画 */0%,70% {opacity: 0;}100% {opacity: 1;}}.outerBox .dateBox h2,.outerBox .dateLeftBox h2 {/* 日期的样式 */position: absolute;margin-left: -120px;margin-top: 3px;color: rgb(84, 84, 85);font-size: 14px;cursor: pointer;/* -webkit-animation: showIn 3s ease; */}.outerBox .dateLeftBox h2 {/* 右边日期的样式 */margin-left: 60px;width: 100px;}.outerBox .dateBox:hover,.outerBox .dateLeftBox:hover {/* 触摸事件后球球的样式 */border: 4px solid rgb(195, 195, 195);background: rgb(143, 189, 253);box-shadow: 0 0 2px 2px rgba(255, 255, 255, 0.4);}.outerBox .dateBox div,.outerBox .dateLeftBox div {/* 左右事件的样式 */position: absolute;top: 50%;margin-top: -15px;left: 50px;width: 300px;height: 21px;border: 2px solid rgb(84, 84, 85);border-radius: 6px;z-index: 2;overflow: hidden;cursor: pointer;/* -webkit-animation: showIn 5s ease; */-webkit-transition: all 0.5s;}.outerBox .dateLeftBox div {/* 左边事件的样式 */left: -337px;}.outerBox .dateBox div:hover,.outerBox .dateLeftBox div:hover {/* 触摸事件后的高度 */height: 68px;}.outerBox .dateBox div p,.outerBox .dateLeftBox div p {/* 左右事件的字体样式 */color: rgb(84, 84, 85);font-weight: bold;text-align: center;}.outerBox .dateBox:before,.outerBox .dateLeftBox:before {/* 右边事件的角标样式 */content: '';position: absolute;top: -3px;left: 37px;width: 0px;height: 0px;border: 7px solid transparent;border-right: 7px solid rgb(84, 84, 85);z-index: -1;-webkit-animation: showIn 5s ease;}.outerBox .dateLeftBox:before {/* 左边事件的角标样式 */left: -34px;border: 7px solid transparent;border-left: 7px solid rgb(84, 84, 85);}.outerBox .dateBox div ul,.outerBox .dateLeftBox div ul {/* 左右事件触摸展开后内容的样式 */list-style: none;width: 300px;padding: 4px;border-top: 2px solid rgb(84, 84, 85);color: rgb(84, 84, 85);font-size: 14px;}
</style></html>

实现效果

仅用css实现时间轴（动画版）相关推荐

Laya动画，整图动画，序列图动画，时间轴动画，龙骨动画
Laya动画基础 Egret帧动画工具类版本:2.1.1.1 序列图动画白鹭的序列图动画,使用TexureMerger合图,然后使用MovieClip类播放. Laya的话,使用图集打包工具合图, ...
Laya的动画制作，整图动画，序列图动画，时间轴动画，龙骨动画
参考: Laya动画基础 Egret帧动画工具类序列图动画白鹭的序列图动画,使用TexureMerger合图,然后使用MovieClip类播放. Laya的话,使用图集打包工具合图,然后使用Ani ...
vue 发展历程时间轴动画_PPT时间轴如何做出创意感？海量素材免费分享，网友：收藏...
时间轴页面,是工作型PPT中常见的页面之一.个人述职或者公司介绍PPT中,使用时间轴,能够让观众更加清晰地了解公司的发展历程. 但是,很多人在制作时间轴页面时,往往是这样的效果: 只有几行字和一根线, ...
html css 水平时间轴,纯css+js水平时间轴
自定义,并自动加载时间节点当前时间节点居中,突出显示时间动态无痕添加效果图: 初始状态时间左走到一定2016.1月后 html: + - 对应 JS 设置处理: var left = docu ...
html5手机端纵向时间轴,HTML+CSS实现时间轴（移动端）
html: 01:06 HTML5+CSS3实现的响应式垂直时间轴faffHTML5+CSS3实现的响应式垂直时间轴 12:25 jQuery+PHP动态数字展示效果 12:20 PHP操作Sessi ...
LayaBox---多状态---时间轴动画
目录 1.右键工程面板下的Scene---新建目录---命名为Animation 2.右键Animation文件夹--新建----动画--命名为xx 3.从预览面板里拖动动画图片到层级面板----切 ...
小程序时间轴和地区列表的实现，js+css实现时间轴效果
老规矩先看效果图先来看左图的地区列表是如何实现的. 我们在解析数据之前,要先看下数据结构 [{"_id": "XL28U3kPDdDCJ9m0"," ...
HTML+CSS实现时间轴效果
先看效果 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8& ...
layaAir引擎制作游戏的图集动画、时间轴动画、和骨骼动画总结二
一.角色序列帧.ani动画的制作 1.在项目管理器中创建动画文件 2.创建动画模板,编辑动效名称 3.编辑序列帧动画 .ani格式动画的代码控制 1.动画加载loadAnmition() 2.播放与停 ...

仅用css实现时间轴（动画版）

前言

实现思路

源码如下

实现效果

仅用css实现时间轴（动画版）相关推荐

最新文章

热门文章