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上测试)
标记
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屋!