css marquee_WebKit Marquee CSS：性感回归

css marquee

We all joke about the days of Web yesteryear.  You remember them:  stupid animated GIFs (flames and "coming soon" images, most notably), lame counters, guestbooks, applets, etc.  Another "feature" we thought we had gotten rid of was the marquee.  The marquee was a rudimentary, javascript-like effect to move text from one side of a block to another.  I was recently looking at WebKit's CSS specs and found that Safari has implemented CSS marquees.

昨天我们都在开玩笑。 您还记得它们：愚蠢的动画GIF(最明显的是火焰和“即将来临”图像)，la脚的计数器，留言簿，小程序等。我们认为我们摆脱了的另一个“功能”是选框。 选取框是一种基本的，类似于javascript的效果，用于将文本从块的一侧移到另一侧。 我最近查看了WebKitCSS规范，发现Safari已经实现了CSS字幕。

View Demo 观看演示

CSS格式 (The CSS Format)

.marquee {  
	overflow-x: -webkit-marquee;
	-webkit-marquee-direction: ahead|auto|backwards|down|forwards|inherit|left|reverse|right|up;
	-webkit-marquee-increment: small|medium|large;
	-webkit-marquee-repetition: {number};
	-webkit-marquee-speed: slow|normal|fast;
	-webkit-marquee-style: alternate|inherit|none|scroll|slide;
	font-size:1.4em;
}

There are five pieces to the marquee puzzle:

字幕难题有五部分：

• overflow-x:  Should be set to -webkit-marquee
  溢出-x：应设置为-webkit-marquee
• -webkit-marquee-direction:  The direction of the marquee.
  -webkit-marquee-direction：选取框的方向。
• -webkit-marquee-increment:  The size by which to move.
  -webkit-marquee-increment：移动的大小。
• -webkit-marquee-repetition:  The  number of times the marquee should repeat.
  -webkit-marquee-重复：字幕应重复的次数。
• -webkit-marquee-speed:  The speed at which to move the ext.
  -webkit-marquee-speed：移动分机的速度。
• -webkit-marquee-style:  The effect which the marquee should function.
  -webkit-marquee-style：选取框应起作用的效果。

CSS选取框用法 (CSS Marquee Usage)

.marquee {  
	overflow-x: -webkit-marquee;
	-webkit-marquee-direction: backwards;
	-webkit-marquee-style: slide;
	-webkit-marquee-speed: fast;
	-webkit-marquee-increment: large;
	-webkit-marquee-repetition: 6;
	font-size:1.4em;
}

The example uses each of the marquee properties given above and should be straight forward.  If you choose to use WebKit's marquee, experiment with the settings to make sure the marquee does what you want.  When it doesn't, fix it with JavaScript...or question why you're using a marquee at all.

该示例使用上面给出的每个选取框属性，并且应该简单明了。 如果选择使用WebKit的选取框，请尝试设置以确保该选取框符合您的要求。 如果没有，请使用JavaScript进行修复...或询问您为什么要使用选框。

View Demo 观看演示

No word yet on when the WebKit team plans to implement a CSS counter.  I'm sure I'll do a tutorial on it when the time comes.

WebKit团队何时计划实现CSS计数器尚无定论。 我敢肯定，时间到了我会做一个教程。

翻译自: https://davidwalsh.name/webkit-marquee-css

css marquee