用纯css绘制线条动画

Question

有没有办法实现一个CSS动画，其中一个点增长为一条线？

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

我知道这可以通过SVG完成，但我想知道是否可以用纯CSS实现。

Answer 1

您可以在1px的元素上使用边框，该边框会增长到所需的长度。

使用@keyframes和animation属性，您可以从页面加载开始。

div{
  height:0px;
  width:1px;
  border-bottom:1px solid #000;
  
  -webkit-animation: increase 3s;
  -moz-animation:    increase 3s; 
  -o-animation:      increase 3s; 
  animation:         increase 3s; 
  animation-fill-mode: forwards;
}

@keyframes increase {
    100% {
        width: 300px;
    }
}

<div></div>

Answer 2

在Transition property中使用CSS，您可以通过定位它的width属性来为效果提供效果。

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

＆＃13;

＆＃13;

.point {
width: 6px;
height: 6px;
background: tomato;
  transition: width 1s ease;
}
.point:hover {
width: 200px;
}

＆＃13;

<div class="point"></div>

＆＃13;

＆＃13;

＆＃13;