css3:animation实现时间轴动画

最新推荐文章于 2024-06-26 10:08:50 发布

PrayerYa

最新推荐文章于 2024-06-26 10:08:50 发布

阅读量4.1k

点赞数 2

分类专栏： web前端文章标签： web 前端 css3 animation 时间轴

本文链接：https://blog.csdn.net/zhonghuachun/article/details/79052413

版权

本文介绍如何利用CSS3的Animation属性制作一个时间轴动画，展示从初识计算机到完成第一个blog的重要事件。通过设置关键帧，实现时间轴宽度随时间变化的动画效果，并详细讲解了各个部分的样式定义，包括外层盒子、时间轴、事件节点和时间对话框等。

摘要由CSDN通过智能技术生成

1.效果预览

2.实现步骤

建立时间轴的整个div结构

<div class="memorial_day">     外层盒子
        <div class="time_axis"></div>       动画时间轴
        <ul>
            <li class="n1">                              节点信息
                <a href="#">初识计算机</a>
                <div class="dataview">2015-09</div>
            </li>
            <li class="n2">
                <a href="#">加入实验室</a>