从左到右动画底部边框

Question

我试图让底部边框从左到右移动。我也无法将其直接定位在标题下方，并且它是从中心向外动画的。我不知道应该改变什么。 https://jsfiddle.net/81uo76hx/2/

.slider {
position: absolute;
display:block;
left: 50%;
top:90%;
transform: translate(-50%, 0);
position:absolute;
top:43%;
margin:0 auto;
height: 2px;
background-color: #000;
width: 0%;
}

- user2252219

Answer 1

希望您能使用JavaScript触发该动画，您可以在纯CSS中使用过渡，并使用额外的类将right从100％设置为0作为动画transition: right 4s; 现在.slider位于#name div中，因此它会随着div移动，而且上/左将相对于这段文本 https://jsfiddle.net/0ou3o9rn/ 带有CSS动画版本（在javascript中添加animated类，但您可以以某种方式将其绑定到悬停或其他事件上） https://jsfiddle.net/tto1vrz5/

- Tamaro Tamaroidny

---

太棒了，谢谢！所以如果我想要边框绘制整个 div，我应该使用像这样的代码：https://jsfiddle.net/50xrf1e6/？ - user2252219

不确定您是否可以使用jQuery来动画化“复杂”值，请再次使用CSS动画，只需向该元素添加类即可，它将动画化可动画的内容（颜色、大小、位置等）- 尝试悬停在该文本上 :) https://jsfiddle.net/vtnucbkm/1/ - Tamaro Tamaroidny

Answer 2

您可以使用 jQuery 设置左侧坐标。然后需要从 CSS 中删除 transform。像这样：

$('.slider').css('left', $('#name').position().left).animate({
        width: $('#name').width()
    }, 4000);

.slider {
    position: absolute;
    display:block;
    margin: 0 auto;
    top:90%;
    position:absolute;
    top:43%;
    margin:0 auto;
    height: 2px;
    background-color: #000;
    width: 0%;
}

https://jsfiddle.net/mbz6okmf/

- Julien Grégoire

Answer 3

这是我会做的方式。将子元素放在一个inline-block容器中，居中该容器，然后将滑块对齐到该容器的左侧。

$('.slider').animate({
    width: $('#name').width()
}, 4000);

#splash {
    text-align:center;
    width:100%;
    height:100%;
}
#splash:before {
    content: "";
    height: 100%;
}
#splash:before,
#wrp {
    display:inline-block;
    vertical-align:middle;
}
#wrp {
    text-align:left;
    display:inline-block;
}
#name {
    color:#000;
    font-family:'Arial-BoldMT';
    font-weight:bold;
    font-size:50px;
    letter-spacing: -2px;
    display:block;
}
.slider {
    height: 2px;
    background-color: #000;
    width: 0;
}
html, body { margin: 0; height: 100%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="splash">
    <div id="wrp">
        <span id="name">random title</span>
        <div class="slider"></div>
    </div>
</div>

- user4639281

Answer 4

将文本和滑块放在一个相对定位的元素中，并设置滑块的 bottom: 0。它将在文本底部从中心向外动画。

HTML

<div id="splash">
    <div id="name">
        <div class="container">
            random title
            <div class="slider"></div>
        </div>
    </div>
</div>

CSS

#splash {
    width:100%;
    height:100%;
    position:fixed;
}
.container {
    position: relative;
}
.slider {
    position: absolute;
    left: 50%;
    bottom: 0;
    height: 2px;
    background-color: #000;
    width: 0%;
    transform: translate(-50%, 0);
}
#name {
    color:#000;
    font-family:'Arial-BoldMT';
    font-weight:bold;
    font-size:50px;
    letter-spacing: -2px;
    left: 50%;
    transform: translate(-50%, 0);
    position:absolute;
    top:40%;
    margin:0 auto;
}

JS Fiddle演示

如果您需要从左到右动画，则将滑块设置为left: 0并删除translate。

JS Fiddle演示

- Miguel Mota