Как увеличить границу линии от центра с помощью анимации css

Я играю вокруг с анимацией CSS, и мне было интересно, если есть способ сделать вертикальную линию (с определенной высотой) автоматически увеличиваться в длину при загрузке страницы , Идеализм Я хочу, чтобы вертикальная линия вырастала из середины и расти с верхней и нижней до определенной высоты. Пока я могу только увеличить его длину сверху донизу. Вот что у меня есть:Как увеличить границу линии от центра с помощью анимации css

.vertical-line { 
 
\t margin-left: 100px; 
 
\t background: red; 
 
\t width: 8px; 
 
\t border-radius: 4px; 
 
\t animation: grow 4s forwards; 
 
} 
 

 
@keyframes grow { 
 
\t 0% { 
 
\t \t height: 10px; 
 
\t } 
 
\t 100% { 
 
\t \t height: 100px; 
 
\t } 
 
}

<!DOCTYPE html> 
 
<html> 
 
\t <head> \t 
 
\t \t <title>Creating Vertical borders using animation/javascript</title> \t 
 
\t </head> 
 
\t <body> 
 
\t \t <div class="vertical-line"></div> 
 
\t </body> 
 
</html>

источник

2016-05-19 Yi Ren

вы хотите светящийся ящик? – keziah

Помог ли кто-нибудь из этих ответов решить вашу проблему? Если да, укажите это. – Himmel

что неправильно WITN ваш код вы просто увеличивая высоту. Для того, чтобы расти на обеих сторонах при увеличении высоты вы должны переместить этот элемент к противоположной стороне
Пример: если вы увеличиваете высоту 100px, то вы должны двигаться напротив для 50px

CSS:

#cool 
{ 
height:10px; 
width:10px; 
border-radius:4px; 
margin-left:10%; 
background-color:#431; 
margin-top:20%; 
animation:grow 3s forwards; 
position:relative; 
} 

@keyframes grow 
{ 
0% { 
    height: 0px; 
    top:0; 
} 
100%{ 
    height: 200px; 
    top:-100px; 
} 
} 

</style>

HTML:

<div id=cool> 

</div> 

</body>

по высоте 100px перемещение элемент top -50px. Взято половину этого, потому что показать рост с обеих сторон. если top -100px, то он будет расти снизу.
Надеюсь, это поможет

источник

2016-05-19 03:21:31

Спасибо! Только то, что мне было нужно. –

Одним из способов вы могли бы сделать это было бы установить начальное положение линии в самом центре, а затем он распространяется в направлении верхней и нижней окна просмотра.

.myLine { 
    position: absolute; 
    left: 50vw; 
    top: 50vh; 
    width: 1px; 
    height: 1px; 
}

Вы можете добавить класс, extended, с помощью JavaScript, который изменяет положение и высоту, тем самым делая его продлить по вертикали от центра.

.extended { 
    top: 0vh; 
    bottom: 100vh; 
    height: 100%; 

    transition: all 3s ease; 
}

Использование JavaScript, как я сделал здесь, вы можете установить краткий тайм-аут, и добавить класс после того, как тайм-аут закончен.

var el = document.querySelector('.myLine'); 

setTimeout(function() { 
el.classList.add('extended'); 
}, 300);

См. Мой пример codepen.

источник

2016-05-19 02:57:04 Himmel

Попробуйте это,

<div class="vertical-line"></div> 
<style> 
    .vertical-line { 
     position: absolute; 
     top: 0; 
     border: 5px solid red; 
     width: 10px; 
     border-radius: 4px; 
     animation: grow 3s infinite alternate; 
    } 

    @keyframes grow { 
     0% { 
      width: 0px; 
      height: 0px; 
     } 
     100% { 
      width: 20px; 
      height: 100%; 
     } 
    } 
</style>

источник

2016-05-19 02:59:32 keziah

Как увеличить границу линии от центра с помощью анимации css

ответ

Смежные вопросы