中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

經(jīng)過這些改變，我們 新的頁面 看起來更好了。

我們將為我們的頁面添加進(jìn)更多的漸進(jìn)式增強(qiáng)效果來結(jié)束這篇教程�；�于WebKit的瀏覽器支持一些更牛叉的特效，如CSS變換、動畫和三維轉(zhuǎn)換等。并且我想在最后一個階段的頁面中應(yīng)用一些這類特效。再一次的，這些屬性會被添加進(jìn)我們既有的CSS中并在不支持它們的瀏覽器中給忽視。所以，針對這種一方面是漸進(jìn)增強(qiáng)一方面是不被支持的情況，使用Modernizr是恰當(dāng)?shù)摹?/p>

首先設(shè)置的：

@-webkit-keyframes spin {
           0% { -webkit-transform: rotateY(0); }
         100% { -webkit-transform: rotateY(360deg); } 
} 

.csstransforms3d.cssanimations section {
         -webkit-perspective: 1000; 
}

@keyframes規(guī)則是新的CSS animations規(guī)范中的一部分，目前只有WebKit支持。它容許你針對任何屬性聲明一個完整的動畫路徑，并在你喜歡的任何階段改變它們。想知道關(guān)于animations的更多知識，請閱讀 W3C Working Draft specification。

下面我們添加使得我們一個元素在三維空間里旋轉(zhuǎn)的代碼：

.csstransforms3d.cssanimations section h2 {
         background-image: url(modernizr-logo.png);
         overflow: hidden;
         -webkit-animation: spin 2s linear infinite; 
}

因?yàn)閘ogo要轉(zhuǎn)動，且又希望它轉(zhuǎn)的時候和背景相處的融洽些，于是這里用了一個png格式的文件。我還采用了一個“overflow:hidden”屬性來隱藏設(shè)置了縮進(jìn)-9999像素的header里的文字。使元素以3D的形式旋轉(zhuǎn)雖然有趣卻并不太美觀。最終，我們選擇使用animation規(guī)則，設(shè)置它的旋轉(zhuǎn)周期為2秒鐘，沿著自身的中軸線旋轉(zhuǎn)，永不停止。

最終的頁面 看起來很給力，甚至還針對WebKit瀏覽器設(shè)置了好玩的動畫。我希望到現(xiàn)在你能明白使用Modernizr可以使你對網(wǎng)站控制的手腕變得多么牛叉，以及它可以令真正的漸進(jìn)增強(qiáng)變得多么簡單。這還不僅僅是Modernizr的全部好處，它還可以幫你建立基于JS的fallbacks以及可以幫你應(yīng)用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://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/
• 堂主譯文地址：
  http://osmn00.com/blog/front-end/taking-advantage-of-html5-and-css3-with-modernizr.html

經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-3014642-1-1.html

本文鏈接：http://www.95time.cn/tech/web/2011/8341.asp　

出處：藍(lán)色理想
責(zé)任編輯：bluehearts

上一頁 Modernizr——為HTML5和CSS3而生 [3] 下一頁

◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。