使用纯CSS实现线条绘制动画

Question

有没有办法实现一个CSS动画，在此过程中，一个点会逐渐变成一条线？

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

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

- sawa

Answer 1

你可以在元素上使用1像素的边框，并将其增长到所需的长度。

使用@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>

- Curtis

---

你如何画一条竖线？ - La Forge1071

Answer 2

使用CSS中的transition属性，可以通过将目标设置为width属性，使一个<div>具有绘制效果。

在结果屏幕上悬停在橙色的圆点上。

.point {
  width: 6px;
  height: 6px;
  background: tomato;
  border-radius: 3px;
  transition: width 1s ease;
}

.point:hover {
  width: 200px;
}

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

- Deepak Yadav

---

依我看，你应该给它一个border-radius: 3px；否则，“这不是一个点”评论将出现。 - Jonas Grumann