Question

我想重新创建此屏幕视频中看到的文字动画我对此网站主题的评论：http://themeforest.net/item/js-responsive-theme/full_screen_preview/7630276

以下是向您展示动画的视频： https://drive.google.com/file/d/0B3HFm_t_vjVpVUNiWVRVdW14aWs/edit?usp=sharing

我不确定从哪里开始，到目前为止通过我的搜索找不到任何类似的东西，我愿意接受任何创建这个的东西，比如jQuery。谢谢你的帮助！

Answer 1

我用两个绝对定位文本，一个灰色（或半透明）第二个文本，顶部设置为overflow:hidden来完成此操作。然后，我只是为第二个容器的宽度设置动画。

你喜欢这个主意吗？：）

编辑：小小的调整，但想法一样 - 为你小提琴：http://jsfiddle.net/Lr4PQ/

非常重要的CSS规则：

white-space: nowrap;

以防止文本节点的宽度小于文本的时候断行。

编辑2：当然，背后的想法让你使用纯CSS实现结果，jQuery的角色只是动画宽度。

HTML：

<div class="container">
  <div class="text upper">You`re the boss</div>
  <div class="text ">You`re the boss</div>
</div>

CSS：

body {
    background:#000;
}
.container {
    position:absolute;
    left:30%;
    top:20%;
    width:auto;
    /*position container as You wish*/
}
.text {
    text-transform:uppercase;
    font-family:sans-serif;
    color:#FFF;
    opacity:.2;
    white-space: nowrap;
    font-size:30px;
}
.text.upper {
    position:absolute;
    opacity:1;
    overflow:hidden;
    width:0%;
}

jQuery的：

$('.text.upper').animate({width:'100%'},3000).animate({width:'0%'},3000);

Answer 2

动画以纯CSS3 ：

实现

<强> jsBin demo

HTML：

<div class="modal">
  <h1 data-content="YOUR BEAUTIFUL NAME">YOUR BEAUTIFUL NAME</h1>
</div>

CSS：

.modal h1 {
    color: #626161;
    font-size: 30px;
    left: 50%;
    margin-left: -125px;
    margin-top: -15px;
    position: absolute;
    text-align: center;
    top: 50%;
}
.modal h1:before {
    animation: 5s ease 0s normal none 1 loading;
    -o-animation: 5s ease 0s normal none 1 loading;
    -ms-animation: 5s ease 0s normal none 1 loading;
    -moz-animation: 5s ease 0s normal none 1 loading;
    -webkit-animation: 5s ease 0s normal none 1 loading;
    color: #E2E2E2;
    content: attr(data-content);
    max-width: 100%;
    overflow: hidden;
    position: absolute;
    white-space:nowrap;
}
@keyframes loading {
  0% { max-width: 0%; }
}
@-o-keyframes loading {
  0% { max-width: 0%; }
}
@-ms-keyframes loading {
  0% { max-width: 0%; }
}
@-moz-keyframes loading {
  0% { max-width: 0%; }
}
@-webkit-keyframes loading {
  0% { max-width: 0%; }
}

他们使用单个h1而不是覆盖两个h1元素并为第二个宽度设置动画的原因之一就是更好的搜索引擎优化页面应该只包含一个h1元件。使用content: attr(data-content);也非常有趣......

重新创建文本动画（来源）

2 个答案: