使用纯css绘制线条动画

有没有办法实现一个CSS动画，其中一个点变成一条线

point l (a dot) ---------------------------> point m (a line)

---

我知道这可以用SVG来实现，但我想知道是否可以用纯CSS来实现。

使用CSS中的

转换属性，您可以通过针对
宽度属性赋予
绘图效果

将鼠标悬停在结果屏幕上的橙色色点上


.point{
宽度：6px；
高度：6px；
背景：番茄；
边界半径：3px；
过渡：宽度1s；
}
.要点：悬停{
宽度：200px；
}
您可以在长度为1px的元素上使用边框，该边框会增长到所需的长度

使用
@关键帧
和
动画
属性，可以从页面加载开始


div{
高度：0px；
宽度：1px；
边框底部：1px实心#000；
-webkit动画：增加3s；
-moz动画：增加3s；
-o动画：增加3s；
动画：增加3s；
动画填充模式：正向；
}
@关键帧增加{
100% {
宽度：300px；
}
}
我想你应该给它一个边界半径：3px；否则，“这不是一个点”的评论就会出现。@JonasGrumann Lmao是真的。