Question

客户已请求选框样式滚动文字横幅（是的）

使用过css动画但是有一些我无法解决的怪癖。

问题在于列表元素刚刚被“敲掉”并堆叠到最后一行。父母的位置是绝对的，所以不确定为什么会发生这种情况。

下一个问题是关键帧，我希望项目从左侧开始，但是在它们完成动画屏幕右侧之前再次开始并滚动。

CSS代码：

as.vector(gl1$beta)-as.vector(gl2$coefficients)[-1]
# [1]  0.0011884697  0.0014056731 -0.0020490872  0.0011896872  0.0014789566  0.0011669064
# [7] -0.0003377824 -0.0011995019  0.0006444471  0.0015116774  0.0007564556  0.00115004

标记：

.sliding-marquee {
    width: 100%;
    height: 44px;
    background-color: #000;
    opacity: 0.6;
    color: white;
    line-height: 44px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    margin-top: 10px;
}

.sliding-marquee ul {
    left: 0;
    top: 0;
    position: absolute;
    animation: marquee 20s linear infinite;
}

.sliding-marquee ul li {
    display: inline-block;
    font-size: 20px;
    text-transform: uppercase;
}

.sliding-marquee ul li i {
    margin-right: 20px;
}

.sliding-marquee ul li + li {
    margin-left: 40px;
}

@keyframes marquee {
    0%   { left: -100% }
    100% { left: 100% }
}

Answer 1

这是纯CSS的小提琴。希望它会有所帮助。

https://jsfiddle.net/d946h29g/

我们的想法是使用Chrome Element Inspector获取文字宽度。

@keyframes marquee {
    0% {
        left: -556px;
    }
    100% {
        left: 100%;
    }
}

Answer 2

问题＃1：仅仅向position: absolute;添加width: 100%;，您仍然需要.sliding-marquee ul或类似内容，这是不够的。如果您未将width设置为100%，则默认设置为right: 0;，这意味着您的width将从100%转到0%你的动画正在播放。

修改后的版本，解决问题＃1：https://jsfiddle.net/wtm_w/0hp144r0/

CSS文本选框问题

2 个答案: