CSS3选框效果

Question

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

HTML标签:

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

CSS:

<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;,以便它可以适应任何长度的文本.

此外,它在Firefox和Safari中表现不佳,在Chrome中表现良好.

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

任何建议将被认真考虑.

弗雷德

Answer 1

随着标记的小变化,这是我的方法(我刚刚span在段落中插入了一个):

示例小提琴:http://jsfiddle.net/MaY5A/1/(边框仅用于调试目的,在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);
  }
}

CSS

<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 (hover the mouse here)</span>
</span>