18 个你可能不相信是用 CSS 制作出来的东西

oschina
 oschina
发布于 2015年08月19日
收藏 270

18-things-built-using-css

与流行的看法相反,CSS不仅仅是用来提供一个WEB页面的基本风格,以使它看起来更有吸引力。还有很多其他的事情,CSS也可以做的很好。由于它创建动画和交互的能力,CSS集合HTML以及JavaScript给WEB开发者提供了尝试不同方法的机会。

浏览器就像一个空的画布,WEB开发者可以在这里尽情的发挥。下面是18个人们用CSS创建的又酷又有创造性的东西的例子,从原始字符到有趣的动画,有很多激励你自己将时间花费在CSS上。

1. The Simpsons

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

the_simpsons_in_css

2. Minions With Pure CSS

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

minnion_jerry

3. Broken neon sign

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

css3_neon

4. Mmm… Cheese

这是一块奶酪还是?Hugo Giraduel用CSS制作了这个3D的奶酪。我不知道你怎么认为,但是它看起来就像某种家居用品。

cheese

5. Single Element CSS character

Hugo Giraudel的另一个作品,这次,他只用一个元素实现了8位字符。

brick_character

6. Viking Shield

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

viking_shield

7. Fluid menu with transparent icon

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

fluid_transparent_menu

8. CSS Creatures

CSS Creatures是由@bennettfeely制作的可以微笑、哭或者你想表达的其他表情。你可以选择牙齿、胡须、颜色、眼睛以及嘴巴来创建你自己。

css_creatures

9. Long Cat

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

long_cat

10. Rolling coke Can

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

coke_bottle_css

11. Calculator

这个计算器的设计简单干净,但是如果结合JavaScript,它会给你带来更多的乐趣。

calculator

12. Grid Animation Effect

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

grid_animation

13. Smooth iOS 7 toogle

这个由Dan Eden制作的切换按钮灵感来源于iOS 7。如果你尝试一下,你会看到它和原来的iOS7切换按钮是多么相似。

ios_7_toogle

14. Animated checkmark button

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

animated_checkmark_button

15. Minion

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

minnion

16. Menu toogle SVG animation

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

menu_toggle_svg

17. Shape masking

CSSMuse用CSS实现圆、五角形、六角形。

shape_masking

18. Loaders Kit

这些是用纯CSS实现的加载样式。如果你想减小带宽的使用,基于CSS的加载样式将会非常的好用。

loaders_kit

via:hongkiat,本文由 Specs 翻译整理,转载自 Coder资源网

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区。
转载请注明:文章转载自 OSCHINA 社区 [http://www.oschina.net]
本文标题:18 个你可能不相信是用 CSS 制作出来的东西
加载中

最新评论(38

中场三分
中场三分

引用来自“缪斯的情人”的评论

此时我该上大招来秒杀这些了,看过来:http://runjs.cn/detail/k78wrwzh
碉炸天!!!!
我就是要用这个ID
我就是要用这个ID

引用来自“缪斯的情人”的评论

此时我该上大招来秒杀这些了,看过来:http://runjs.cn/detail/k78wrwzh
太流弊了!
霡霂
霡霂

引用来自“缪斯的情人”的评论

此时我该上大招来秒杀这些了,看过来:http://runjs.cn/detail/k78wrwzh

引用来自“霡霂”的评论

大谬,那个火车的传动杆不动哦。不过只这些已经是牛掰轰轰放光彩了。

引用来自“缪斯的情人”的评论

没时间观察火车轮子怎么传动了,姑且这样,等想好了再改

引用来自“霡霂”的评论

一看就是城里长大的孩子,我小时候经常在铁路上玩。

引用来自“开源中国匿名会员”的评论

有没有扎硬币。

引用来自“霡霂”的评论

经常,扎了铁定磨成飞刀。火车停靠的时候钻到车底下去玩。

引用来自“心尖偏左”的评论

土豪,那时候我们都没有多余的硬币轧.是轧钉子,轧完后就像一把mini剑

引用来自“霡霂”的评论

我也是扎铁钉,硬币当时都是扎一分的,一毛的要留着买冰棍。

引用来自“开源中国匿名会员”的评论

我都是去捡啤酒盖扎。
扎完了从中间钻俩洞,穿上水泥袋绳子,就成一件玩具了。
然后转起来,俩人对杠,看谁的绳子先被切断。
现在想起来特么忒危险的游戏,
据称有小孩因为玩这个脸上留疤。不知道有没有被搞瞎的。

引用来自“霡霂”的评论

蚂蚱、石头什么的都扎过,平均十个铁钉,扎完能找到一个。

引用来自“开源中国匿名会员”的评论

有没有找到过人散落的尸体残骸之类的
没有。我们那条线上,死过几个人。不过我就去看过一次,在我6岁上学前班的时候,就在学校北边,小伙伴们结伴去看的
开源中国匿名会员
开源中国匿名会员

引用来自“缪斯的情人”的评论

此时我该上大招来秒杀这些了,看过来:http://runjs.cn/detail/k78wrwzh

引用来自“霡霂”的评论

大谬,那个火车的传动杆不动哦。不过只这些已经是牛掰轰轰放光彩了。

引用来自“缪斯的情人”的评论

没时间观察火车轮子怎么传动了,姑且这样,等想好了再改

引用来自“霡霂”的评论

一看就是城里长大的孩子,我小时候经常在铁路上玩。

引用来自“开源中国匿名会员”的评论

有没有扎硬币。

引用来自“霡霂”的评论

经常,扎了铁定磨成飞刀。火车停靠的时候钻到车底下去玩。

引用来自“心尖偏左”的评论

土豪,那时候我们都没有多余的硬币轧.是轧钉子,轧完后就像一把mini剑

引用来自“霡霂”的评论

我也是扎铁钉,硬币当时都是扎一分的,一毛的要留着买冰棍。

引用来自“开源中国匿名会员”的评论

我都是去捡啤酒盖扎。
扎完了从中间钻俩洞,穿上水泥袋绳子,就成一件玩具了。
然后转起来,俩人对杠,看谁的绳子先被切断。
现在想起来特么忒危险的游戏,
据称有小孩因为玩这个脸上留疤。不知道有没有被搞瞎的。

引用来自“霡霂”的评论

蚂蚱、石头什么的都扎过,平均十个铁钉,扎完能找到一个。
有没有找到过人散落的尸体残骸之类的
cmxz
cmxz
css3的世界好复杂。。
霡霂
霡霂

引用来自“缪斯的情人”的评论

此时我该上大招来秒杀这些了,看过来:http://runjs.cn/detail/k78wrwzh

引用来自“霡霂”的评论

大谬,那个火车的传动杆不动哦。不过只这些已经是牛掰轰轰放光彩了。

引用来自“缪斯的情人”的评论

没时间观察火车轮子怎么传动了,姑且这样,等想好了再改

引用来自“霡霂”的评论

一看就是城里长大的孩子,我小时候经常在铁路上玩。

引用来自“开源中国匿名会员”的评论

有没有扎硬币。

引用来自“霡霂”的评论

经常,扎了铁定磨成飞刀。火车停靠的时候钻到车底下去玩。

引用来自“心尖偏左”的评论

土豪,那时候我们都没有多余的硬币轧.是轧钉子,轧完后就像一把mini剑

引用来自“霡霂”的评论

我也是扎铁钉,硬币当时都是扎一分的,一毛的要留着买冰棍。

引用来自“开源中国匿名会员”的评论

我都是去捡啤酒盖扎。
扎完了从中间钻俩洞,穿上水泥袋绳子,就成一件玩具了。
然后转起来,俩人对杠,看谁的绳子先被切断。
现在想起来特么忒危险的游戏,
据称有小孩因为玩这个脸上留疤。不知道有没有被搞瞎的。
蚂蚱、石头什么的都扎过,平均十个铁钉,扎完能找到一个。
开源中国匿名会员
开源中国匿名会员

引用来自“缪斯的情人”的评论

此时我该上大招来秒杀这些了,看过来:http://runjs.cn/detail/k78wrwzh

引用来自“霡霂”的评论

大谬,那个火车的传动杆不动哦。不过只这些已经是牛掰轰轰放光彩了。

引用来自“缪斯的情人”的评论

没时间观察火车轮子怎么传动了,姑且这样,等想好了再改

引用来自“霡霂”的评论

一看就是城里长大的孩子,我小时候经常在铁路上玩。

引用来自“开源中国匿名会员”的评论

有没有扎硬币。

引用来自“霡霂”的评论

经常,扎了铁定磨成飞刀。火车停靠的时候钻到车底下去玩。

引用来自“心尖偏左”的评论

土豪,那时候我们都没有多余的硬币轧.是轧钉子,轧完后就像一把mini剑

引用来自“霡霂”的评论

我也是扎铁钉,硬币当时都是扎一分的,一毛的要留着买冰棍。
我都是去捡啤酒盖扎。
扎完了从中间钻俩洞,穿上水泥袋绳子,就成一件玩具了。
然后转起来,俩人对杠,看谁的绳子先被切断。
现在想起来特么忒危险的游戏,
据称有小孩因为玩这个脸上留疤。不知道有没有被搞瞎的。
JefferyZh
JefferyZh
牛逼
返回顶部
顶部