页面加载时滑入的线条，使用 CSS 或 jQuery [关闭]答案

【问题标题】：Line that slides in when page loads, using CSS or jQuery [closed]页面加载时滑入的线条，使用 CSS 或 jQuery [关闭]
【发布时间】：2015-04-10 19:52:19
【问题描述】：

在这个网站上 - http://bit.ly/1Oir0D7 在第一次加载页面时，徽标和标语之间会出现一条线。我不明白这是怎么做到的。你能帮我弄清楚我该如何复制它吗？

【问题讨论】：

标签： jquery html css

【解决方案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;}
}

&lt;div&gt;Text&lt;/div&gt;

【讨论】：

哇，好快，非常感谢！
@Uldis 不客气