Строка, которая скользит при загрузке страницы, используя CSS или jQuery

Question

На этом веб-сайте - http://bit.ly/1Oir0D7 между первой страницей и логотипом проходит строка между логотипом и слоганом. Я не мог понять, как это делается. Не могли бы вы помочь мне понять, как я мог бы повторить это?

Answer 1

Вы можете сделать что-то вроде этого

$('.b').animate({
    marginLeft:'0px'
},500)

.a{
    font-size:50px;
}
.b{
    position:absolute;
    content:"";
    width:100px;
    height:2px;
    background:orange;
    margin-top:50;
    margin-left:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="a">Text</div>
<div class="b"></div>

Или это решение CSS

div{
    font-size:50px;
}
div:after{
    position:absolute;
    content:"";
    width:100px;
    height:2px;
    background:orange;
    margin-top:50px;
    margin-left:100px;
    -webkit-animation:move 1s forwards;
   -moz-animation:move 1s forwards;
   -o-animation:move 1s forwards;
   -ms-animation:move 1s forwards;
   animation:move 1s forwards;
}

@-webkit-keyframes move{
    100%{margin-left:-100px;}
}
@-moz-keyframes move{
    100%{margin-left:-100px;}
}
@-o-keyframes move{
    100%{margin-left:-100px;}
}
@-ms-keyframes move{
    100%{margin-left:-100px;}
}
@keyframes move{
    100%{margin-left:-100px;}
}

<div>Text</div>