javascript - 如何为覆盖全屏宽度且不溢出的元素设置动画

Question

我在 p 元素上应用了一些动画，并想制作一个类似字幕的效果，它们会有点动画，但它们会超出屏幕或溢出。

我搜索了很多，但没有找到确切的，只有 Css3。

我必须在 translateX(screen_width) 中定义屏幕宽度才能产生这种效果。

-webkit-transform: translateX(100%);  // Now i am using but fails

My fiddle of animation

你有什么想法，我如何在没有 JavaScript 的情况下完成这个任务？

我在我的问题中添加 JavaScript 标签只是为了引起注意，如果任何编剧知道 Css 3

Answer 1

你可以做到这一点。它可能有点过于复杂，但它是纯 HTML 和 CSS。

jsFiddle

通过动画 <span>在 <p> 中的位置在 left: 0 之间和 left: 100%同时还使用翻译来移动 <span>它的全长向左，translate(-100%) .由于元素将相对于其最近的父元素定位，因此您需要指定 position: relative对于 <p>和 position: absolute对于 <span>

 仅用于确保 <p>即使 <span> 仍保持其高度里面有position: absolute

CSS 动画

@-webkit-keyframes move {
    100% {
        left: 0;
    }
    0% {
        left: 100%;
        -webkit-transform: translate(-100%);
    }
}

<p> 的 CSS和文字

p {
    margin:5px;
    position: relative;
}
span {
    position: absolute;
}
p:nth-child(1) {
    color:red;
    font-size:100px;    
}
p:nth-child(1) span {
    -webkit-animation: move 2s cubic-bezier(.47, .49, .47, .49) infinite alternate;
}

文本的 HTML

<div id='bgcont'>
    <p>
        &nbsp;<span>Gnome</span>
    </p>
    <p>
        &nbsp;<span>Testfile</span>
    </p>
    <p>
        &nbsp;<span>Myfilenew</span>
    </p>
    <p>
        &nbsp;<span>Textshadow</span>
    </p>
</div>