CSS3选框效果 [英] CSS3 Marquee Effect

问题描述

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

HTML标记：

 < div id =caption> 
快速的棕色狐狸跳过懒惰的狗。快速的棕色狐狸跳过懒惰的狗。快速的棕色狐狸跳过懒惰的狗。 
< / div> 
  

CSS：

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

现在我可以得到基本的选框效果，但代码不够聪明。 p>

我想知道是否有办法避免使用 margin-left：-4200px; 等特定值，

此外，它在Firefox和Safari中无法顺利运行，在Chrome中运行良好。

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

任何建议将不胜感激。

Fred

解决方案

span ）：

范例小提琴：http://jsfiddle.net/MaY5A/1/ （仅包含用于调试目的的边框，已在Firefox和Chrome上测试）

< hr>

标记

 < p class =microsoft marquee>< ; span> Windows 8和...< / span>< / p> 
  

CSS

  .marquee {
 width：450px; 
 margin：0 auto; 
 white-space：nowrap; 
 overflow：hidden; 
 box-sizing：border-box; 
} 
 
 .marquee span {
 display：inline-block; 
 padding-left：100％; / *显示刚刚在段落外面的选框* / 
 animation：marquee 15s linear infinite; 
} 
 
 .marquee span：hover {
 animation-play-state：paused 
} 
 
 / *让它移动* 
 @keyframes marquee {
 0％{transform：translate（0，0）; } 
 100％{transform：translate（-100％，0）; } 
} 
  

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

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

如果您需要在开始处插入延迟一次，那么还要设置 animation-delay 。如果你需要在每个循环插入一个小延迟，然后尝试使用更高的 padding-left （例如 150％）

I'm creating a marquee effect with CSS3 animation. Here are my codes.

HTML tag:

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

Now I can get the basic marquee effect, but the codes is not wise enough.

I wonder if there is a way to avoid using specific values like margin-left:-4200px;, so that it can adapt text in any length.

Also, it doesn't perform smoothly in Firefox and Safari, performs well in Chrome.

Here is a similar demo: http://jsfiddle.net/jonathansampson/XxUXD/, it uses text-indent but still with specific values.

Any advice will be appreciated.

Fred

解决方案

With a small change of the markup, here's my approach (I've just inserted a span inside the paragraph):

Example Fiddle: http://jsfiddle.net/MaY5A/1/ (borders included only for debug purpose, tested on firefox and chrome)

---

Markup

<p class="microsoft marquee"><span>Windows 8 and ...</span></p>

CSS

.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); }
}

No hardcoded values — dependent on paragraph width — have been inserted

The animation applies the CSS3 transform property (use prefixes where needed) so it performs well.

If you need to insert a delay just once at the beginning then also set an animation-delay. If you need instead to insert a small delay at every loop then try to play with an higher padding-left (e.g. 150%)

这篇关于CSS3选框效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！