html+css+js做一个路线动画
时间: 2023-09-10 09:16:04 浏览: 60
以下是一个使用HTML、CSS和JavaScript创建路线动画的示例:
```html
<!DOCTYPE html>
<html>
<head>
<style>
#container {
position: relative;
width: 500px;
height: 500px;
background-color: #f1f1f1;
}
.point {
width: 10px;
height: 10px;
background-color: red;
border-radius: 50%;
position: absolute;
}
.line {
position: absolute;
border: 2px solid blue;
animation: drawLine 2s linear forwards;
}
@keyframes drawLine {
from {
width: 0;
}
to {
width: 200px;
}
}
</style>
</head>
<body>
<div id="container">
<div id="point1" class="point"></div>
<div id="line1" class="line"></div>
<div id="point2" class="point"></div>
<div id="line2" class="line"></div>
<div id="point3" class="point"></div>
</div>
<script>
// 获取元素
const point1 = document.getElementById('point1');
const line1 = document.getElementById('line1');
const point2 = document.getElementById('point2');
const line2 = document.getElementById('line2');
const point3 = document.getElementById('point3');
// 设置初始位置
point1.style.left = '50px';
point1.style.top = '50px';
// 设置连线位置
line1.style.left = '55px';
line1.style.top = '55px';
// 设置初始位置
point2.style.left = '55px';
point2.style.top = '55px';
// 设置连线位置
line2.style.left = '60px';
line2.style.top = '60px';
// 设置初始位置
point3.style.left = '60px';
point3.style.top = '60px';
</script>
</body>
</html>
```
这段代码使用了CSS中的`@keyframes`动画和JavaScript来实现路线动画效果。通过设置`width`属性,并在`@keyframes`中定义动画的起始和结束状态,我们可以创建一个逐渐绘制线条的动画。你可以根据需要调整点和线的位置、尺寸和样式,以及动画的持续时间和速度。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)