点与动画之间的空间从顶部到底部
我创建了一个框,其中包含下面的文本,垂直虚线和图标。点与动画之间的空间从顶部到底部
我想创建像下面的图片
这是我所创建的,在我的代码,点线非常接近对方,因为我已经使用的边界,但不知道创建点的其他方式以及我所看到的动画是,点一个接一个地出现。
.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>
您可以使用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>
也许你会尝试这样的:
.dots:before {
content: '';
width: 10px;
margin-left: -5px;
position: absolute;
background: #404040;
height: 0%;
}
而且从0%动画的高度为100%与CSS过渡或JS; 我希望这个帮助。
我希望这是你在找什么。我刚刚改变了边界点的大小。但是你必须改变边界文字的边距。因为由于尺寸的变化,文字变得更接近点。
.lets-experience > .dots {
width: 1px;
height: 50px;
margin: 0 auto 0 auto;
border-right: 3px dotted #fff;
}
简单的动画纯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">⇣</div>
<div class="anim"></div>
</div>
感谢您的回答,我认为SVG方法要好得多.. –
您可以使用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>
感谢您的答案,我决定采用@XYZ建议的SVG方法下面 –
没问题,但如果你认为它是一个很好的答案,请投票1 up :) –
非常感谢!它正是我正在寻找的! –