如何创建选框效果？

Question

我正在使用 CSS3 动画创建选取框效果。

#caption {
    position: fixed;
    bottom: 0;
    left: 0;
    font-size: 20px;
    line-height: 30px;
    height:30px;
    width: 100%;
    white-space: nowrap;
    -moz-animation:  caption 50s linear 0s infinite;
    -webkit-animation:  caption 50s linear 0s infinite;
}
@-moz-keyframes caption { 
    0% { margin-left:120%; } 100% { margin-left:-4200px; }  
}
@-webkit-keyframes caption { 
    0% { margin-left:120%; } 100% { margin-left:-4200px; }  
}

<div id="caption">
    The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog.
</div>

现在我可以得到基本的选框效果了，但是代码对于这个演示来说太具体了。

有没有办法避免使用像margin-left:-4200px; 这样的特定值，以便它可以适应任何长度的文本？

这是一个类似的演示：http://jsfiddle.net/jonathansampson/XxUXD/ 使用 text-indent，但仍具有特定值。

Answer 1

根据之前的回复，主要是@fcalderan，这个选框在悬停时会滚动，其优点是即使文本比其滚动的空间短，动画也会完全滚动，而且任何文本长度都需要相同的时间（这可能是优点或缺点）当不悬停时，文本返回初始位置。

除了滚动时间之外没有硬编码值，最适合小滚动空间

.marquee {
    width: 100%;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    display: inline-flex;    
}

.marquee span {
    display: flex;        
    flex-basis: 100%;
    animation: marquee-reset;
    animation-play-state: paused;                
}

.marquee:hover> span {
    animation: marquee 2s linear infinite;
    animation-play-state: running;
}

@keyframes marquee {
    0% {
        transform: translate(0%, 0);
    }    
    50% {
        transform: translate(-100%, 0);
    }
    50.001% {
        transform: translate(100%, 0);
    }
    100% {
        transform: translate(0%, 0);
    }
}
@keyframes marquee-reset {
    0% {
        transform: translate(0%, 0);
    }  
}

<span class="marquee">
    <span>This is the marquee text (hover the mouse here)</span>
</span>

Answer 2

对标记稍作改动，这是我的做法（我刚刚在段落中插入了span）：

.marquee {
  width: 450px;
  margin: 0 auto;
  overflow: hidden;
  box-sizing: border-box;
}

.marquee span {
  display: inline-block;
  width: max-content;

  padding-left: 100%;
  /* show the marquee just outside the paragraph */
  will-change: transform;
  animation: marquee 15s linear infinite;
}

.marquee span:hover {
  animation-play-state: paused
}


@keyframes marquee {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}


/* Respect user preferences about animations */

@media (prefers-reduced-motion: reduce) {
  .marquee span {
    animation-iteration-count: 1;
    animation-duration: 0.01; 
    /* instead of animation: none, so an animationend event is 
     * still available, if previously attached.
     */
    width: auto;
    padding-left: 0;
  }
}

<p class="marquee">
   <span>
       When I had journeyed half of our life's way, I found myself
       within a shadowed forest, for I had lost the path that 
       does not stray. – (Dante Alighieri, <i>Divine Comedy</i>. 
       1265-1321)
   </span>
   </p>

---

没有插入硬编码值（取决于段落宽度）。

动画应用了 CSS3 transform 属性（在需要的地方使用前缀），所以效果很好。

如果您只需要在开头插入一次延迟，那么还要设置一个animation-delay。如果您需要在每个循环中插入一个小延迟，请尝试使用更高的padding-left（例如150%）

Answer 3

已接受的答案动画在 Safari 上不起作用，我已使用 translate 而不是 padding-left 对其进行了更新，这使得动画更流畅、防弹。

此外，接受的答案演示小提琴有很多不必要的样式。

所以我创建了一个简单的版本，如果你只是想剪切和粘贴有用的代码而不是花 5 分钟清理演示。

http://jsfiddle.net/e8ws12pt/

.marquee {
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0;
    height: 16px;
    display: block;
}
.marquee span {
    display: inline-block;
    text-indent: 0;
    overflow: hidden;
    -webkit-transition: 15s;
    transition: 15s;
    -webkit-animation: marquee 15s linear infinite;
    animation: marquee 15s linear infinite;
}

@keyframes marquee {
    0% { transform: translate(100%, 0); -webkit-transform: translateX(100%); }
    100% { transform: translate(-100%, 0); -webkit-transform: translateX(-100%); }
}

<p class="marquee"><span>Simple CSS Marquee - Lorem ipsum dolor amet tattooed squid microdosing taiyaki cardigan polaroid single-origin coffee iPhone. Edison bulb blue bottle neutra shabby chic. Kitsch affogato you probably haven't heard of them, keytar forage plaid occupy pitchfork. Enamel pin crucifix tilde fingerstache, lomo unicorn chartreuse plaid XOXO yr VHS shabby chic meggings pinterest kickstarter.</span></p>

Answer 4

以下应该做你想要的。

@keyframes marquee {
    from  { text-indent:  100% }
    to    { text-indent: -100% }
}