点与动画之间的空间从顶部到底部

Question

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

我想创建像下面的图片

这是我所创建的，在我的代码，点线非常接近对方，因为我已经使用的边界，但不知道创建点的其他方式以及我所看到的动画是，点一个接一个地出现。

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

<div class="lets-experience"> 
 
    <p>Lets Experience</p> 
 
    <div class="dots"> </div> 
 
    <svg class="experience-arrow" viewBox="0 0 20 20"> 
 
    \t <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 { 
 
\t position: absolute; 
 
\t left: 0; 
 
\t right: 0; 
 
\t margin: 0 auto; 
 
\t bottom: 25px; 
 
\t max-width: 150px; 
 
\t text-align: center; 
 
\t color: #fff; 
 
\t font-family: 'Gotham-Book'; 
 
\t font-size: 14px; 
 
    background:#404040; 
 
} 
 
.lets-experience > p { 
 
\t margin: 5px 0; 
 
} 
 
.lets-experience > .dots { 
 
\t width: 10px; 
 
\t height: 50px; 
 
\t margin: 0 auto 0 auto; 
 
\t /*border-right: 1px dotted #fff;*/ 
 
} 
 
.dots svg{ 
 
    animation: heightAnim 1s linear infinite; 
 
} 
 

 
@keyframes heightAnim { 
 
    from { 
 
    height: 0px; 
 
    } 
 
    to { 
 
    height: 45px; 
 
    } 
 
} 
 
.experience-arrow { 
 
\t width: 2em; 
 
\t height: 2em; 
 
\t transform: rotate(90deg); 
 
\t margin: -10px -2px 0 0; 
 
} 
 
.experience-arrow > path { 
 
\t 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"> 
 
    \t <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 2

也许你会尝试这样的：

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

而且从0％动画的高度为100％与CSS过渡或JS; 我希望这个帮助。

Answer 3

我希望这是你在找什么。我刚刚改变了边界点的大小。但是你必须改变边界文字的边距。因为由于尺寸的变化，文字变得更接近点。

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

Answer 4

简单的动画纯CSS

.container { 
 
    position: relative; 
 
} 
 

 
.arrow { 
 
    font-size: 5em; 
 
    position: absolute; 
 
} 
 

 
.anim { 
 
    height: 5px; 
 
    background-color: white; 
 
    position: absolute; 
 
    width: 100%; 
 
    animation: blink 1s linear alternate infinite; 
 
} 
 

 
@keyframes blink { 
 
    from { 
 
    height: 0px; 
 
    } 
 
    to { 
 
    height: 55px; 
 
    } 
 
}

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

Answer 5

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

.lets-experience { 
 
\t position: absolute; 
 
\t left: 0; 
 
\t right: 0; 
 
\t margin: 0 auto; 
 
\t bottom: 25px; 
 
\t max-width: 150px; 
 
\t text-align: center; 
 
\t color: #fff; 
 
\t font-family: 'Gotham-Book'; 
 
\t font-size: 14px; 
 
    background:#404040; 
 
} 
 
.lets-experience > p { 
 
\t margin: 5px 0; 
 
} 
 
.lets-experience > .dots { 
 
\t width: 1px; 
 
\t height: 50px; 
 
\t margin: 0 auto 0 auto; 
 
\t //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 { 
 
\t width: 2em; 
 
\t height: 2em; 
 
\t transform: rotate(90deg); 
 
\t margin: -10px -2px 0 0; 
 
} 
 
.experience-arrow > path { 
 
\t fill: #fff; 
 
} 
 
@keyframes animatedBackground { 
 
    from { background-position: 0% 0%; } 
 
    to { background-position: 0% 100%; } 
 
}

<div class="lets-experience"> 
 
    <p>Lets Experience</p> 
 
    <div class="dots"> </div> 
 
    <svg class="experience-arrow" viewBox="0 0 20 20"> 
 
    \t <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>