我在p Elements上应用了一些动画,并希望制作一个类似字幕的效果,虽然它们会进行动画处理,但它们会超出屏幕或溢出。

我搜索了很多,但没有找到确切的内容,仅使用Css3。

为了达到这种效果,我必须在translateX(screen_width)定义屏幕宽度。

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

我的动画小提琴

您有任何想法吗,我如何在没有JavaScript的情况下完成此任务?

编码屏幕

如果有脚本编写者知道Css 3 ,我会在问题中添加JavaScript标记只是为了引起注意

#1楼 票数:1 已采纳

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

的jsfiddle

通过对<p><span>位置进行动画处理,使其位于left: 0left: 100%同时还使用平移将<span>的全长向左移动, translate(-100%) 由于元素将相对于其最接近的父元素定位,因此需要指定position: relative对于<p> position: absoluteposition: absolute用于<span>

&nbsp; 仅用于确保<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>

  ask by Ashish Mishra translate from so

未解决问题?本站智能推荐:

2回复

如何使用JavaScript以编程方式为元素设置动画?

我正在看这段代码http://codepen.io/optyler/pen/FgDyr ,如果将鼠标悬停在三角形元素上,将会看到动画。 但是,我不想将其悬停,而是要使用JavaScript以编程方式进行。 到目前为止,这是我所做的: 并添加了一个新的CSS类 尽管您可以在此处http
1回复

设置具有绝对位置的屏幕宽度的子宽度最大值

我有3个下拉菜单,它们的动态宽度和位置都像这样 我想使每个下拉宽度从当前位置开始,直到屏幕宽度的最大值,这样从右侧离开10px。 下拉列表位于其父容器的绝对位置。 我想制作一个单独的CSS类,并应用每个下拉列表,以便它可以像上面的那样运行,最大屏幕宽度可以从中减去10px。
2回复

除屏幕外的所有屏幕上的半透明深色蒙版/覆盖层当专注于内部元素?

我有一个<div id="translucent-mask">我想覆盖所有屏幕,但<nav>内的所有内容除外, 当且仅 <nav> 关注我的<nav>栏<li>元素之一(它们具有tabindex)时所以我可以专注于它们: 这就是di
1回复

如何知道溢出元素可见部分的长度?

有一个有许多行的桌子; 因此,表格溢出了文档视口的垂直轴: 如您所见:准备好文档后,只显示表格的一部分。 那么如何知道那部分的长度呢?
1回复

如何为不同的对象设置不同的灯箱

嗨,大家好,这可能是一个非常简单的问题,但我正在这里的灯箱旁玩耍。 我在网站上可以正常使用它,但是我想在其他页面上使用它,但是我不能,所以我猜测我可能需要更改ID或其他内容? 我不确定 HTML: CSS: 因此,为了完全清楚起见,我让它适用于一个对象,但想在其他对象上使用该效果
4回复

如何使body元素的宽度延伸到html的宽度?

这里是SSCCE的JSFiddle。 我在html上有全屏background-image ,例如 我将background-color应用于body ,其值具有一定的透明度,如下所示: 这样,作为页面的整体外观,背景中有一幅图像通过半透明(半透明)覆盖层(主体的背景颜色)进行窥视。
5回复

根据屏幕大小隐藏和显示元素

我正在尝试制作在较小的屏幕上显示网页时隐藏和显示菜单的按钮。 当显示宽度大于640px时,我想保留整个菜单。 我只允许使用CSS和JavaScript。 这是我写的JS函数: 在较小的屏幕上显示页面时它正在工作。 当我单击按钮隐藏菜单(将“菜单”显示更改为none )然后增加页面
1回复

为什么我的网站内容在方形窗口(宽度和高度相同的屏幕)上彼此重叠?

我是一名新的网页设计师。 这将是我第二个在线发布的网站。 问题是该网站非常适合所有屏幕尺寸的窗口(方形屏幕除外)。 举例来说, 此监视器将分解我的Web内容,并迫使它们彼此叠置或彼此叠置。 那看起来很糟糕。 我的假设是我的代码中有一个很小的错误导致发生这种情况,但是我无法弄清楚错误在哪