Question

我创建了一个框，其中包含文本，垂直虚线和图标。

我正在尝试创建如下图像

这是我创建的，在我的代码中，虚线彼此非常接近，因为我使用了边框，但不知道是什么其他方式来创建点，我看的动画是，点逐个出现

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

使用纯CSS的简单动画

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
  <div class="arrow">&#8675;</div>
  <div class="anim"></div>
</div>

{{1}}

Answer 2

您可以使用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>

Answer 3

您可以使用background-image代替border，更改image-size以控制每张图片的大小，并使用repeat-y使其看起来像点缀

  background-image: linear-gradient(to bottom, #333 90%, rgba(255, 255, 255, 0) 20%);
  background-position: top;
  background-size: 1px 10px;
  background-repeat: repeat-y;
  background-color: #ffffff;

动画它只需使用css

@keyframes animatedBackground {
    from { background-position: 0% 0%; }
    to { background-position: 0% 100%; }
}

使用animation: animatedBackground 20s linear infinite;

调用动画

＆＃13;

.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;
  background-image: linear-gradient(to bottom, #333 90%, rgba(255, 255, 255, 0) 20%);
  background-position: top;
  background-size: 1px 10px;
  background-repeat: repeat-y;
  background-color: #ffffff;
  animation: animatedBackground 20s linear infinite;
  
}

.experience-arrow {
	width: 2em;
	height: 2em;
	transform: rotate(90deg);
	margin: -10px -2px 0 0;
}
.experience-arrow > path {
	fill: #fff;
}
@keyframes animatedBackground {
    from { background-position: 0% 0%; }
    to { background-position: 0% 100%; }
}

＆＃13;

<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>

＆＃13;

Answer 4

也许你会尝试这个：

.dots:before {
    content: '';
    width: 10px;
    margin-left: -5px;
    position: absolute;
    background: #404040;
    height: 0%;
}

使用CSS过渡或JS，动画高度从0％到100％; 我希望这有帮助。

Answer 5

我希望这就是你要找的东西。我刚改变了边框右边的点数。但你必须改变边界文本的边距。因为尺寸的变化，文字变得更接近点。

 .lets-experience > .dots {
            width: 1px;
            height: 50px;
            margin: 0 auto 0 auto;
            border-right: 3px dotted #fff;
        }

点和空间之间的空间从上到下

5 个答案: