已知10个点,实现10个点之间一个接一个出现连线的动画特效,即每两个点中间连一个线,写一段html/css代码
时间: 2024-04-17 22:23:45 浏览: 31
以下是一个基本的HTML和CSS代码示例,用于实现10个点之间的连线动画特效:
```html
<!DOCTYPE html>
<html>
<head>
<title>点之间连线动画</title>
<style>
/* 设置画布大小 */
#canvas {
width: 500px;
height: 300px;
border: 1px solid #000;
position: relative;
}
/* 定义点的样式 */
.point {
position: absolute;
width: 10px;
height: 10px;
background-color: red;
border-radius: 50%;
animation: fadeIn 1s ease-in-out forwards;
}
/* 定义连线的样式 */
.line {
position: absolute;
border-bottom: 1px solid blue;
animation: drawLine 1s ease-in-out forwards;
}
/* 定义点和连线的动画 */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes drawLine {
0% {
width: 0;
}
100% {
width: 100%;
}
}
</style>
</head>
<body>
<div id="canvas">
<!-- 这里将通过JavaScript动态添加点和连线 -->
</div>
<script>
// 获取画布元素
const canvas = document.getElementById('canvas');
// 定义点的位置
const points = [
{ x: 50, y: 50 },
{ x: 100, y: 100 },
{ x: 150, y: 150 },
{ x: 200, y: 200 },
{ x: 250, y: 250 },
{ x: 300, y: 150 },
{ x: 350, y: 100 },
{ x: 400, y: 50 },
{ x: 450, y: 200 },
{ x: 500, y: 250 }
];
// 动态添加点和连线
for (let i = 0; i < points.length; i++) {
// 创建点元素
const pointElement = document.createElement('div');
pointElement.className = 'point';
pointElement.style.left = points[i].x + 'px';
pointElement.style.top = points[i].y + 'px';
pointElement.style.animationDelay = (i * 0.2) + 's'; // 每个点延迟0.2秒出现
canvas.appendChild(pointElement);
// 创建连线元素
if (i < points.length - 1) {
const lineElement = document.createElement('div');
lineElement.className = 'line';
lineElement.style.left = points[i].x + 'px';
lineElement.style.top = (points[i].y + 5) + 'px';
lineElement.style.width = (points[i + 1].x - points[i].x) + 'px';
lineElement.style.animationDelay = (i * 0.2) + 's'; // 每个连线延迟0.2秒出现
canvas.appendChild(lineElement);
}
}
</script>
</body>
</html>
```
上述代码使用了HTML和CSS来创建一个画布元素,并通过JavaScript动态添加点和连线。每个点和连线都具有淡入的动画效果,并且每个点和连线都有0.2秒的延迟出现。你可以根据需要修改画布的大小、点和连线的样式等参数。希望对你有所帮助!
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](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)