CSS 是网页设计非常重要的一部分,随着越来越多的浏览器对 CSS3 支持的不断完善,设计师和开发者们有了更多的选择。如今,用纯 CSS 就可以实现各种各样很酷的效果,甚至是动画。
本文收集了15个惊人的 CSS3 动画演示,它们将证明 CSS3 Transform 和 Transition 属性的强大能力。
1. Pure CSS Coke Can
![](https://images0.cnblogs.com/blog/36987/201310/23231341-13d0f521b15946919a40bdc5d57b12f2.jpg)
2. Colorful Clock
![](https://images0.cnblogs.com/blog/36987/201310/23231352-7a7f16853c0c4a38b1cedb433581c70e.jpg)
3. jQuery DJ Hero
![](https://images0.cnblogs.com/blog/36987/201310/23231430-3c9e8c60cf9144fda0826798f8612159.jpg)
4. Animated Pricing Column
![](https://images0.cnblogs.com/blog/36987/201310/23231442-eacb0061f58a43dba14032e677929dbd.jpg)
5. Slick jQuery Menu
![](https://images0.cnblogs.com/blog/36987/201310/23231453-a27f1a16ecb947978cf931e3297b78a6.jpg)
6. Frame-by-Frame Animation (Hover to Play)
![](https://images0.cnblogs.com/blog/36987/201310/23231504-7f452cfb499445b2a334bb36d61c2fc0.jpg)
7. AT-AT Walker
![](https://images0.cnblogs.com/blog/36987/201310/23231518-1839725c74914800a0e8a61017638e2e.jpg)
8. Contextual Slideout Tips With jQuery & CSS3
![](https://images0.cnblogs.com/blog/36987/201310/23231539-7d7dc931658545e2bb5c144c45a25388.jpg)
9. CSS3 & jQuery Slide Out Button
![](https://images0.cnblogs.com/blog/36987/201310/23231605-619d2df410a44f988f9cec6873ae2d60.png)
10. A Fresh Bottom Slide Out Menu with jQuery
![](https://images0.cnblogs.com/blog/36987/201310/23231618-f121075299a8425ab89c7e9b288f4f1f.png)
11. Drop-In Modals
![](https://images0.cnblogs.com/blog/36987/201310/23231953-43f589af7c5d41b7be5d5e30f53854d6.jpg)
12. CSS3 Lightbox Gallery With jQuery
![](https://images0.cnblogs.com/blog/36987/201310/23232016-9e3bc64f46d94540ae7ac1c48628aab6.jpg)
13. Easily Turn Your Images Into Polaroids with CSS3
![](https://images0.cnblogs.com/blog/36987/201310/23232026-b0f3839ed6a84e05888aec13888fb031.jpg)
14. Beautiful Looking Custom Dialog Box With jQuery and CSS3
![](https://images0.cnblogs.com/blog/36987/201310/23232038-e6a2212f23444429a1732d3b7c80d1c5.jpg)
15. Cross-Browser Rounded Buttons with CSS3 and jQuery
![](https://images0.cnblogs.com/blog/36987/201310/23232048-53b43f7f6cde441fabf7717e58824c22.png)