X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close
有一些乐趣CSS3的过渡
翻译谷歌翻译

看来,浏览器厂商真正推动新的CSS3特性,在以相当快的速度通过​​,尽管CSS2.1才刚刚被

即使对CSS3完成大多数现代浏览器已经实施了一段时间,几年离。病在这个快速提示您​​展示一个整洁的小使用CSS3的过渡效果翻车。


第1步

我在这里有一些非常简单的标记。只是一个无序的一些链接英寸名单:


我把里面的一些span标签的链接标签,纯粹是为了向后兼容。我知道它没有严格的语义,但如果你想在IE6(奶昔拳头!)这是如何youll需要标记为IE6的(震撼的拳头!)它不会明白:悬停在比链接的任何其他标签。为IE7你会需要确保一个DOCTYPE声明:悬停工作在非链接元素。青衫,我知道了!

伊夫应用一些简单的造型,做一个横向导航栏。


这是的结果是:


伊夫应用显示:内联;列表标签,以防止在IE6中的一些布局问题(奶昔拳头 !) 。


第2步

现在IM背景图像应用到我的链接标签:


这是的结果是:


我知道这看起来有点怪异,但多多包涵。图像调整使用的背景速记规则。

背景: ;


第3步

现在我可以span标签样式。


这是结果。


你会注意到link标签的背景图像现在是隐藏的是坐在它上面的span标记的背景颜色。 SPAN标记也高度小于20像素的链接标签。这是很重要的!


第4步

现在生病我的链接标签:悬停规则。这将导致的链接标签的背景图像,本质上揭示了链接,当你鼠标向下移动10px。


这是结果。


在这一点上,你基本上是在后备模式。目前的标记应该在每一个已知的浏览器工作。我从现在开始添加任何代码将CSS3和支持从浏览器上会有所不同。


第5步

现在生病的链接标签添加我的CSS3的过渡规则。


继承人如何它的工作原理。

过渡:

(适用于该元素的所有CSS属性)

0.3秒(的过渡时间)

线性(过渡时间曲线)


现在,任何的链接标签的属性的变化(悬停)会顺利过渡到新的价值。即背景位置和文本的颜色。

你会注意到,也有相当CSS过渡的几个供应商的前缀。目前每个浏览器以不同的方式实现这种效果,所以我们需要的目标多达我们可以。


MOZ - Mozilla Firefox浏览器

野生动物园,铬 - WebKit的=

- O - =歌剧院


一旦这是最后定稿,将成为简单的过渡。


第6步

最后,生病添加一些快速的圆角。


这是的结果是:


兼容性

  • This should work well in Firefox, Safari and Chrome. 
  • Opera does support CSS3 Transitions but not yet on background-position. 
  • Hopefully we’ll see this in Internet Explorer in about the year 3038. But don’t bet on it!!


结论

这个概念可以应用到负载的翻滚效果。在下面你会下载发现包括这种效果,当你超过一张专辑辊它显示格式的CD,一个很好的过渡乙烯基一些例子。


在这里下载特殊的CSS3实例

玩一下,有一些有趣的



Toby Pitman

Toby Pitman | Articles by this author

For the past 20 years Toby has worked as a professional guitarist, programmer and producer. Clients include Sir Paul McCartney, George Michael, Shirley Bassey, Yusuf Islam, Giles Martin as well as the London 2012 Olympic Ceremonies. He has also worked extensively in TV, Advertising and Film. As well as composing himself he has also worked alongside many composers like David Arnold, Clint Mansell and Simon Franglen on many major film releases. An expert in synthesis and sound design Toby has also lectured for Apple on their Logic Pro music software which he has used since its days on the Atari. He has also worked as an educator for the International Guitar Foundation and the Brighton Institute of Modern Music teaching guitar. In his spare time (of which there is very little) he moonlights as a motion graphics artist specialising in Cinema 4D and After Effects.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link