javascript - 点之间的空间和从上到下的动画

Question

我创建了一个框，下面有文本、垂直虚线和图标。

我正在尝试创建如下图

这是我创建的，在我的代码中，虚线彼此非常接近，因为我使用了边框，但不确定还有什么其他方式来创建点，而我正在看的动画是，点一个接一个地出现.

.lets-experience {
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	bottom: 25px;
	max-width: 150px;
	text-align: center;
	color: #fff;
	font-family: 'Gotham-Book';
	font-size: 14px;
  background:#404040;
}
.lets-experience > p {
	margin: 5px 0;
}
.lets-experience > .dots {
	width: 1px;
	height: 50px;
	margin: 0 auto 0 auto;
	border-right: 1px dotted #fff;
}
.experience-arrow {
	width: 2em;
	height: 2em;
	transform: rotate(90deg);
	margin: -10px -2px 0 0;
}
.experience-arrow > path {
	fill: #fff;
}

<div class="lets-experience">
  <p>Lets Experience</p>
  <div class="dots"> </div>
  <svg class="experience-arrow" viewBox="0 0 20 20">
  	<path fill="none" d="M14.989,9.491L6.071,0.537C5.78,0.246,5.308,0.244,5.017,0.535c-0.294,0.29-0.294,0.763-0.003,1.054l8.394,8.428L5.014,18.41c-0.291,0.291-0.291,0.763,0,1.054c0.146,0.146,0.335,0.218,0.527,0.218c0.19,0,0.382-0.073,0.527-0.218l8.918-8.919C15.277,10.254,15.277,9.784,14.989,9.491z"></path>
  </svg> 
</div>

Answer 1

您可以使用 svg 来创建线条并使用高度动画

.lets-experience {
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	bottom: 25px;
	max-width: 150px;
	text-align: center;
	color: #fff;
	font-family: 'Gotham-Book';
	font-size: 14px;
  background:#404040;
}
.lets-experience > p {
	margin: 5px 0;
}
.lets-experience > .dots {
	width: 10px;
	height: 50px;
	margin: 0 auto 0 auto;
	/*border-right: 1px dotted #fff;*/
}
.dots svg{
   animation: heightAnim 1s linear infinite;
}

 @keyframes heightAnim {
  from {
    height: 0px;
  }
  to {
    height: 45px;
  }
}
.experience-arrow {
	width: 2em;
	height: 2em;
	transform: rotate(90deg);
	margin: -10px -2px 0 0;
}
.experience-arrow > path {
	fill: #fff;
}

<div class="lets-experience">
  <p>Lets Experience</p>
  <div class="dots">
      <svg width="10px" height="45px">

        <line x1="5" x2="5" y1="5" y2="45" stroke="#FFF" stroke-width="5" stroke-linecap="round" stroke-dasharray="1, 10"/>

    </svg>
  </div>
  <svg class="experience-arrow" viewBox="0 0 20 20">
  	<path fill="none" d="M14.989,9.491L6.071,0.537C5.78,0.246,5.308,0.244,5.017,0.535c-0.294,0.29-0.294,0.763-0.003,1.054l8.394,8.428L5.014,18.41c-0.291,0.291-0.291,0.763,0,1.054c0.146,0.146,0.335,0.218,0.527,0.218c0.19,0,0.382-0.073,0.527-0.218l8.918-8.919C15.277,10.254,15.277,9.784,14.989,9.491z"></path>
  </svg> 
</div>