Question

我正在使用CSS3动画创建一个选框效果。这是我的代码。

HTML标记：

<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>

CSS：

#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; }  }

现在我可以获得基本的选框效果，但代码不够明智。

我想知道是否有办法避免使用margin-left:-4200px;之类的特定值，以便它可以适应任何长度的文本。

此外，它在Firefox和Safari中表现不佳，在Chrome中表现良好。

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

任何建议都将受到赞赏。

佛瑞德

Answer 1

标记稍有变化，这是我的方法（我刚刚在段落中插入span）：

Demo fiddle

（边框仅用于调试目的，在firefox和chrome上测试）

.marquee {
  width: 450px;
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  /* show the marquee just outside the paragraph */
  animation: marquee 15s linear infinite;
}

.marquee span:hover {
  animation-play-state: paused
}


/* Make it move */

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

<p class="marquee">
   <span>
       Windows 8 and Windows RT are focused on your life—your friends 
       and family, your apps, and your stuff. With new things like the 
       Start screen, charms and a Microsoft account, you can spend    
       less time searching and more time doing.
   </span>
   </p>

没有硬编码值 - 取决于段落宽度 - 已插入

动画应用CSS3 transform属性（在需要时使用前缀），因此它表现良好。

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

Answer 2

基于上一个回复（主要是@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</span>
</span>

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 {
  0% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee {
    animation: none;
    overflow: visible;
    direction: unset;
    white-space: wrap;
  }
}

.marquee {
  will-change: transform;
  animation: marquee 60s infinite linear;
  overflow: hidden;
  direction: rtl;
  white-space: nowrap;
}

main {
  padding: 20px;
  border: 1px solid black;
}

<main>
  <section class="marquee">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mauris risus, commodo non risus at, tincidunt vestibulum sapien. Phasellus sit amet felis odio. In ultricies arcu non quam facilisis consectetur id sed lorem
  </section>
</main>

Answer 5

以下应该做你想做的事。

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

Answer 6

我认为你应该去一些javascript文本滑块，它适用于所有浏览器。我喜欢这个，你可以做同样的事情：

http://jscroller2.markusbordihn.de/example/endless/

CSS3选框效果

6 个答案: