1

我想在水平和垂直居中的文本上制作“进来”动画。在动画运行之前，文本将比视口宽。在动画期间，文本的字体大小和字母间距将减小，以便动画结束后文本适合视口。

问题是，只要文本比视口宽，文本只会溢出左侧并且不居中。在这里查看我的代码

HTML：

<div id="welcome">
    <div id="welcome_text_wrap">
         <div id="welcome_text">sometext</div>
    </div>
</div>

<div id="page_container">
     <h2>Page Content</h2>
</div>

CSS：

#welcome {
     width: auto;
    min-width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    background: black;
    z-index: 1000;
    display: none;
}

#welcome_text_wrap {
     display: table-cell;
     vertical-align: middle;
     text-align: center;
}

#welcome_text {
    font-size: 40vw;
    letter-spacing: 1em;
    font-family: serif;
    color: white;
    text-transform: lowercase;
    opacity: 0;
    border: 1px solid red;
    display: inline;
}

.after_animation {
    font-size: 12vw !important;
    letter-spacing: 0em !important;
    opacity: 1 !important;
}

JS：

function show_welcome() {
$("#welcome").css("display", "table");

$("#welcome_text").addClass("after_animation", {
    duration: 5000,
    children: true,
    easing: 'easeInOutQuint',
    complete: function() {
        setTimeout(4000, $("#welcome").fadeOut(800));
    }
 });
}

$(document).ready(function(e) {
     show_welcome();
});

即使文本不适合视口，如何使文本居中？另外，有没有更好的方法来制作这种动画？也许使用 CSS 3 过渡？

谢谢分配，

缺口

4

2 回答 2

1

我用 CSS 包裹了#welcome 和#welcome_container：

#welcome_container {
    overflow:hidden;
}

对于#welcome，我更改了：

#welcome {
    ...
    min-width: 4000px;
    max-width: 4000px;
    ...
    position:absolute;
    left:50%;
    margin-left:-2000px;
    top:0;
}

在此处查看实际操作http://jsfiddle.net/mattydsw/P3sJe/13/

于 2013-07-20T11:41:29.367 回答
0

您必须减小welcome_text div 的字体大小！并使用90% 的宽度和一些填充。

http://jsfiddle.net/P3sJe/12/

css

#welcome {
    width: 90%;
    padding: 0 5%;
}
#welcome_text {
    font-size: 60px;
}
于 2013-07-20T10:38:20.140 回答