html中如何添加时间轴

答：

1。在网页中画一个层，选中层，修改/时间轴/添加对象到时间轴。，在第一帧处，放到动画的开始位置，在最后一帧处，将层移动到结束位置，勾选自动播放和循环。这是直线运动

2。在网页中画一个层，选中层，修改/时间轴/录制层路径。拖动层，划出路线。勾选自动播放和循环。

3。选中要添加行为的对象，在设计面板的行为标签下，添加行为。把事件设置为合理的。

请参考

css+html实现时间轴

1.css

body {

font-size: 12px

}

ul li {

list-style: none

}

.track-rcol {

width: 100%

border: 1px solid #eee

}

.track-list {

margin: 20px

padding-left: 5px

position: relative

}

.track-list li {

position: relative

padding: 9px 0 0 25px

line-height: 18px

border-left: 1px solid #d9d9d9

color: #999

}

.track-list li.first {

color: red

padding-top: 0

border-left-color: #fff

}

.track-list li .node-icon {

position: absolute

left: -6px

top: 50%

width: 11px

height: 11px

background: url(img/trank.png) -21px -72px no-repeat

}

.track-list li.first .node-icon {

background-position: 0 -72px

}

.track-list li .time {

margin-right: 20px

position: relative

top: 4px

display: inline-block

vertical-align: middle

}

.track-list li .txt {

position: relative

top: 4px

display: inline-block

vertical-align: middle

}

.track-list li.first .time {

margin-right: 20px

}

.track-list li.first .txt {

max-width: 600px

}

新建一个网页文件，绘制一个层，然后在层中插入一幅图片，并在层上单击鼠标右键，选择“添加到时间轴”选项

如果你的系统没有打开时间轴面板，可以执行“窗口/时间轴”菜单命令，打开时间轴面板， 将层添加到时间轴以后，会自动在层中显示一段蓝色的矩形块。拖动矩形块前后的两个白色圆点，可以改变时间轴的长度，也可以直接在图3中所示的红色框中输入帧的数值，Fps为帧频速率。

选中图层，然后执行“修改/时间轴/录制层路径”菜单命令，系统会自动记录下我们拖动层时的运动轨迹。好了，现在选中时间轴中的后面一个关键帧，在页面中拖动层，系统会记录下层的运动轨迹，并在时间轴中适时添加关键帧。

如果选中“自动播放”和“循环”选项，在打开网页时会自动播放时间轴动画。保存文件，然后按下F12键预览一下效果吧！

综述：

通过对Dreamweaver8的新功能的了解，相信你会有理由去升级自己的Dreamweaver，因为在设计网页的过程中它确实给我们带来了极大的便利，实现了新的飞跃，无论是功能还是性能都获得了重大的改进，使我们不仅能为网络和移动设备创建及发布更具表现力、更引人注目的内容，而且效率更高，所用的时间更少。

---