代码之家 › 专栏 › 技术社区 › user2252219

设置下边框动画(从左到右)

css jquery javascript

user2252219 · 技术社区 · 11 年前

我正在尝试从左到右获取底部边框。我似乎也不能把它直接放在标题下,它从中心向外移动。我不知道该改变什么。

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

4 回复 | 直到 11 年前

Tamaro Tamaroidny 11 年前

希望你能用javascript触发动画,你可以用纯CSS进行转换和设置 right 从100%到0,附加类作为动画 transition: right 4s;

.slider 现在在 #name div,因此它将随它一起移动,顶部/左侧将与此文本相关

https://jsfiddle.net/0ou3o9rn/

带有CSS动画的版本(添加 animated 类,但您可以在创建时以某种方式将其绑定到悬停或其他事件) https://jsfiddle.net/tto1vrz5/

Julien Grégoire 11 年前

您可以使用 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/

Miguel 11 年前

将文本和滑块包裹在相对定位的元素中,并设置滑块 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 如果需要从左到右设置动画,请删除translate。

JS Fiddle Demo

user4639281 user4639281 11 年前

我就是这样做的。制作一个 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>