點與動畫之間的空間從頂部到底部

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>