经过这些改变,我们 新的页面 看起来更好了。
我们将为我们的页面添加进更多的渐进式增强效果来结束这篇教程。基于WebKit的浏览器支持一些更牛叉的特效,如CSS变换、动画和三维转换等。并且我想在最后一个阶段的页面中应用一些这类特效。再一次的,这些属性会被添加进我们既有的CSS中并在不支持它们的浏览器中给忽视。所以,针对这种一方面是渐进增强一方面是不被支持的情况,使用Modernizr是恰当的。
首先设置的:
@-webkit-keyframes spin { 0% { -webkit-transform: rotateY(0); } 100% { -webkit-transform: rotateY(360deg); } }
.csstransforms3d.cssanimations section { -webkit-perspective: 1000; }
@keyframes规则是新的CSS animations规范中的一部分,目前只有WebKit支持。它容许你针对任何属性声明一个完整的动画路径,并在你喜欢的任何阶段改变它们。想知道关于animations的更多知识,请阅读 W3C Working Draft specification。
下面我们添加使得我们一个元素在三维空间里旋转的代码:
.csstransforms3d.cssanimations section h2 { background-image: url(modernizr-logo.png); overflow: hidden; -webkit-animation: spin 2s linear infinite; }
因为logo要转动,且又希望它转的时候和背景相处的融洽些,于是这里用了一个png格式的文件。我还采用了一个“overflow:hidden”属性来隐藏设置了缩进-9999像素的header里的文字。使元素以3D的形式旋转虽然有趣却并不太美观。最终,我们选择使用animation规则,设置它的旋转周期为2秒钟,沿着自身的中轴线旋转,永不停止。
最终的页面 看起来很给力,甚至还针对WebKit浏览器设置了好玩的动画。我希望到现在你能明白使用Modernizr可以使你对网站控制的手腕变得多么牛叉,以及它可以令真正的渐进增强变得多么简单。这还不仅仅是Modernizr的全部好处,它还可以帮你建立基于JS的fallbacks以及可以帮你应用html5那些牛掰的新特性。
附,Modernizr检测清单:
1. @font-face 2. Canvas 3. Canvas Text 4. WebGL 5. HTML5 Audio 6. HTML5 Audio formats 7. HTML5 Video 8. HTML5 Video formats 9. rgba() 10. hsla() 11. border-image 12. border-radius 13. box-shadow 14. text-shadow 15. Multiple backgrounds 16. background-size 17. opacity 18. CSS Animations 19. CSS Columns 20. CSS Gradients 21. CSS Reflections 22. CSS 2D Transforms 23. CSS 3D Transforms 24. Flexible Box Model 25. CSS Transitions 26. Geolocation API 27. Input Types 28. Input Attributes 29. localStorage 30. sessionStorage 31. Web Workers 32. applicationCache 33. SVG 34. Inline SVG 35. SVG Clip paths 36. SMIL 37. Web SQL Database 38. IndexedDB 39. Web Sockets 40. hashchange Event 41. History Management 42. Drag and Drop 43. Cross-window Messaging 44. Touch Events
经典论坛交流: http://bbs.blueidea.com/thread-3014642-1-1.html
本文链接:http://www.blueidea.com/tech/web/2011/8341.asp
出处:蓝色理想
责任编辑:bluehearts
上一页 Modernizr——为HTML5和CSS3而生 [3] 下一页
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|