Question

我试图让左下边界从左到右。我也似乎无法将其直接放在标题下，并从中心向外动画。我不知道该改变什么。

.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%;
}

Answer 1

我就是这样做的。在子项周围创建一个inline-block容器，将其居中，然后将滑块对齐到该容器的左侧。

＆＃13;

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

＆＃13;

#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%; }

＆＃13;

<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>

＆＃13;

Answer 2

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

$('.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/

Answer 3

将文本和滑块包裹在相对定位的元素中，并设置滑块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 Demo

如果您需要从左到右设置动画，请设置滑块left: 0并删除翻译。

<强> JS Fiddle Demo

Answer 4

希望你能用javascript触发那个动画，你可以用转换的纯CSS来做，并将right从100％设置为0，额外的类作为动画transition: right 4s;

.slider现在位于#name div内，因此它将随之移动，而top / left将相对于此文本

https://jsfiddle.net/0ou3o9rn/

带有CSS动画的

版本（在javascript中添加animated类，但您可以以某种方式将其绑定到悬停或其他创建事件） https://jsfiddle.net/tto1vrz5/

动画底部边框（从左到右）

4 个答案: