你可能没法相信的，让你眼界大开的18个CSS杰做

导语 与流行的见解相反，CSS不单单是用来提供一个WEB页面的基本风格，以使它看起来更有吸引力。还有不少其余的事情，CSS也能够作的很好。因为它建立动画和交互的能力，CSS集合HTML以及JavaScript给WEB开发者提供了尝试

与流行的见解相反，CSS不单单是用来提供一个WEB页面的基本风格，以使它看起来更有吸引力。还有不少其余的事情，CSS也能够作的很好。因为它建立动画和交互的能力，CSS集合HTML以及JavaScript给WEB开发者提供了尝试不一样方法的机会。

浏览器就像一个空的画布，WEB开发者能够在这里尽情的发挥。下面是18我的们用CSS建立的又酷又有创造性的东西的例子，从原始字符到有趣的动画，有不少激励你本身将时间花费在CSS上。

1. The Simpsons

Chris Pattle使用纯CSS建立了Simpsons家族。他把每一个角色的脸部拆分红很小的形状，而后又拼接回去。他甚至给角色的眼睛添加了动画来赋予它们生命力

2. Minions With Pure CSS

若是你看过电影《Despicable Me(神偷奶爸)》，那你必定对其中的Minion(小黄人)印象深入。Amr Zakaria用纯CSS实现了其中的几个Minion，它们会用闪烁的眼睛和友好的手势给你打招呼。

3. <a href="http://cssdeck.com/labs/neon-signs-%3Ca%20href=" http:="" www.aseoe.com="" div-css="" "="" target="_blank" class="keylink" style="-webkit-tap-highlight-color: rgba(255, 0, 0, 0); color: rgb(55, 152, 144);">css3" rel="external nofollow" target="_blank" title="">Broken neon sign

这是用CSS的 text-shadow 实现破碎的霓虹灯效果的例子。把鼠标放到单词上，注意字母“c”、“n”和“i”的变化。

4. Mmm… Cheese

这是一块奶酪仍是？Hugo Giraduel用CSS制做了这个3D的奶酪。我不知道你怎么认为，可是它看起来就像某种家居用品。

5. Single Element CSS character

Hugo Giraudel的另外一个做品，此次，他只用一个元素实现了8位字符。

6. Viking Shield

这个一个由 LukyVj 建立的Viking盾牌。它作的太好了，以致于你很难看出它是用CSS而不是由图形编辑器作出来的。

7. Fluid menu with transparent icon

这是一个独特的透明颜色滑块菜单，当鼠标滑过的时候会有一个菜单图标。

8. CSS Creatures

CSS Creatures是由@bennettfeely制做的能够微笑、哭或者你想表达的其余表情。你能够选择牙齿、胡须、颜色、眼睛以及嘴巴来建立你本身。

9. Long Cat

调整您的浏览器窗口，猫的身体会根据浏览器窗口的宽度来拉伸或压缩。你以为这个CSS-kitty拉伸或者压缩的的程度是多大呢？

10. Rolling coke Can

这是另外一个很是有趣的。当你向右滑动滚动条的时候，看起来就像是可乐罐在滚动同样。一个纯CSS实现的很棒的效果。

11. <a href="http://thecodeplayer.com/walkthrough/javascript-%3Ca%20href=" http:="" www.aseoe.com="" div-css="" "="" target="_blank" class="keylink" style="-webkit-tap-highlight-color: rgba(255, 0, 0, 0); color: rgb(55, 152, 144);">css3-calculator" rel="external nofollow" target="_blank" title="">Calculator

这个计算器的设计简单干净，可是若是结合JavaScript，它会给你带来更多的乐趣。

12. Grid Animation Effect

应用任何动画效果是很困难的，更不用说是经过纯CSS。可是这个网格动画效果实现的很漂亮。

13. Smooth iOS 7 toogle

这个由Dan Eden制做的切换按钮灵感来源于iOS 7。若是你尝试一下，你会看到它和原来的iOS7切换按钮是多么类似。

14. Animated checkmark button

Sascha Michael Trinkaus制做了这个由渐变颜色包围的复选框按钮。请特别注意当你点击它的时候的效果。

15. Minion

这是另外一个由CSS实现的可爱风格的Minion 。

16. Menu toogle SVG animation

看动画的演示，您将看到菜单形状的平稳过渡到另外一个形状。

17. Shape masking

<a href="http://cssdeck.com/user/%3Ca%20href=" http:="" www.aseoe.com="" tag-css-1.html"="" target="_blank" class="keylink" style="-webkit-tap-highlight-color: rgba(255, 0, 0, 0); color: rgb(55, 152, 144);">CSSMuse" target="_blank" title="">CSSMuse用CSS实现圆、五角形、六角形。

18. Loaders Kit

这些是用纯CSS实现的加载样式。若是你想减少带宽的使用，基于CSS的加载样式将会很是的好用。

　　关注小编了解更多精彩内容

　　加入小编的前端学习q u n，领取精品的前端免费学习课程视频，同时我将为您分享精品资料。

        213+126+486   邀请码：落叶