Как анимировать вертикальные линии, растущие и растущие с помощью CSS? - PullRequest
Новая
       5

Как анимировать вертикальные линии, растущие и растущие с помощью CSS?

0 голосов
/ 15 сентября 2018

Я хочу создать прямоугольник и анимировать рисунок линий.Линии должны расти вертикально вверх и вниз от прямоугольника.В общем, я хочу, чтобы 2 строки росли, а 2 линии росли.

Это мой текущий скрипт: 

.content {
  position: fixed;
  background-color: #dd8341;
  top: 40%;
  width: 100%;
  height: 20%;
  padding: 20px;
}

.vertline {
  width: 2px;
  margin-left: 10%;
  background-color: #dd8341;
  top: 40%;
  animation:lineup 3s forwards;
  position: relative;
}

@keyframes lineup {
  0% {
    height: 0px;
  }
  100% {
    height: 200px;
  }
}
<div class="content"></div>
<div class="vertline"></div>

Я не могу правильно выровнять все элементы.Как правильно выполнить эту простую задачу?

Ответы [ 2 ]

0 голосов
/ 16 сентября 2018

Вот идея только с фоном и градиентом: 

.content {
  position: fixed;
  width:100%;
  height:100vh;
  background-image:
    linear-gradient(#dd8341,#dd8341),
    linear-gradient(#dd8341,#dd8341),
    linear-gradient(#dd8341,#dd8341);
  background-position:center, 10% center,calc(10% + 4px) center;
  background-size:100% 40%,2px 0,2px 0;
  background-repeat:no-repeat;
  animation:lineup 2s forwards linear;
}

@keyframes lineup {
 to {
    background-size:100% 40%,2px 100%,2px 100%;
  }
}
<div class="content"></div>

UPDATE

Чтобы добавить задержку, просто добавьте больше состояний в анимацию: 

.content {
  position: fixed;
  width:100%;
  height:100vh;
  background-image:
    linear-gradient(#dd8341,#dd8341),
    linear-gradient(#dd8341,#dd8341),
    linear-gradient(#dd8341,#dd8341);
  background-position:center, 20% center,80% center;
  background-size:100% 40%,2px 0,2px 0;
  background-repeat:no-repeat;
  animation:lineup 2s forwards linear;
}

@keyframes lineup {
 50% {
    background-size:100% 40%,2px 100%,2px 0%;
  }
  to {
    background-size:100% 40%,2px 100%,2px 100%;
  }
}
<div class="content"></div>
0 голосов
/ 16 сентября 2018

Вы можете сделать это без дополнительных элементов , используя псевдоэлементы :before и :after для увеличения и уменьшения и background: linear-gradient() для создания двух строк: 

.content {
  position: fixed;
  background-color: #dd8341;
  top: 40%;
  width: 100%;
  height: 20%;
  padding: 20px;
}

.content:before,
.content:after {
  content: "";
  width: 6px; /* color white ("no color") color (each 2px wide); here you can adjust the width */
  height: 0;
  background: linear-gradient(to right, #dd8341, #dd8341 33.33%, #fff 33.33%, #fff 66.66%, #dd8341 66.66%); /* here you can adjust the spacing */
  margin-left: 10%;
  position: absolute; /* needs to be absolute */
  top: 0;
  animation: lineup 3s forwards;
}

.content:after {
  top: 100%;
  animation: linedown 3s forwards;
}

@keyframes lineup {100% {top: -200px; height: 200px}}
@keyframes linedown {100% {height: 200px}}
<div class="content"></div>

Дополнительно: 

/* recommended */
* {box-sizing: border-box}
body {margin: 0}

.content {
  position: fixed;
  background-color: #dd8341;
  top: 40%;
  width: 100%;
  height: 20%;
  padding: 20px;
}

.content:before,
.content:after,
.linedown1,
.linedown2 {
  content: "";
  width: 2px;
  height: 0;
  background: #dd8341;
  left: 20%;
  position: absolute;
  top: 0;
  animation: lineup 3s forwards;
}

.linedown1, .linedown2 {top: 100%; animation: linedown 3s forwards}

.content:after, .linedown2 {left: 80%; animation-delay: 1s}

@keyframes lineup {100% {top: -200px; height: 200px}}
@keyframes linedown {100% {height: 200px}}
<div class="content">
  <span class="linedown1"></span>
  <span class="linedown2"></span>
</div>
...