定制直线时间轴动画，简单易上手

在网站建设中，动画的运用可以增强页面的交互性和吸引力，为用户提供更好的浏览体验。今天我们要介绍的是如何创建一个简单的直线时间线动画。

步骤一：创建时间线

首先，在页面中创建一个时间线对象，并给它一个唯一的ID。在HTML代码中加入如下代码：

``````

然后，在CSS中设置该时间线对象的样式：

```
#timeline {
width: 100%;
height: 2px;
background-color: #ccc;
position: relative;
}
```

这样就创建了一个简单的灰色横线。

步骤二：添加时间节点

接下来，我们需要添加时间节点。在HTML代码中加入如下代码：

```



```

在CSS中设置节点的样式：

```
.timeline-item {
width: 10px;
height: 10px;
background-color: #ccc;
border-radius: 50%;
position: absolute;
top: -4px;
}
```

这样就创建了三个小圆点，代表着时间节点。

步骤三：添加动画效果

最后，添加动画效果。我们可以使用Javascript来实现动画，代码如下：

```
const timelineItems = document.querySelectorAll('.timeline-item');
const timeline = document.getElementById('timeline');

function animateLine(e) {
let year = this.getAttribute('data-year');
let offset = e.offsetX;
let timelineWidth = timeline.offsetWidth;

let lineTo = offset / timelineWidth * 100;
line.style.transform = 'scaleX(' + lineTo + ')';

for (let i = 0; i < timelineItems.length; i++) {
let itemYear = timelineItems[i].getAttribute('data-year');
let itemLeft = timelineItems[i].offsetLeft;
let pos = itemLeft / timelineWidth * 100;

if (year == itemYear) {
this.classList.add('active');
} else {
timelineItems[i].classList.remove('active');
}
}
}

for (let i = 0; i < timelineItems.length; i++) {
timelineItems[i].addEventListener('click', animateLine);
}
```

这段代码将在用户点击时间节点时触发，根据鼠标在时间线上的位置，将线条做相应比例的缩放，并高亮当前时间节点。

这样，一个简单的直线时间线动画就完成了。当然，我们还可以对其进行更多的扩展和优化，让它更加出色。