本文转载自: 关于网路那些事网路趋势观察 - 18 个CSS 鬼斧神工之作! 用CSS打造出的小黄人，你看出来了吗?
对于一般网页设计师而言，对CSS的刻板印象只在于样式设计方面，能让你更容易设计出具有吸引力的网页，但事实上，他的能力比你想像中还来得复杂，用CSS一样可以做出艳丽的效果，例如纯动画及互动元件，当然，如果搭配HTML、Javascript，又能激发更多的创意变化。
浏览器就像是一个空白的画布，最重要的还是你能不能运用灵感，在这张画布上发挥你的创意，在这里，将介绍18个使用CSS来打造的创意作品，从最简单的字体到动画，相信都能让你对CSS有所改观。
小黄人 华丽板
如果你无法抵抗小黄人的热潮，看到Amr Zakaria 使用纯CSS作出来的小黄人动画，可能会让你情绪瞬间疯狂激动起来。 冷静一下，看动画前请小心慎入~
辛普森家族
由Chris Pattle打造的辛普森整个家族大头贴动画，将他们的表情及特色都描述的相当出神，甚至能从画面感受到这些人物的呼吸。
霓虹灯
这个例子运用CSS来实现霓虹灯的标示效果，让人感觉很真实，你可以试着移动滑鼠到图案上面，霓虹灯上的字母将会有一些互动的效果喔。
起司
嗯~ 对. 就只是一张起司图，但你别忘了这个三D起司画面是用纯CSS画出来的~ 连结: Hugo Giraduel - Cheese
用CSS+单一元素 设计出一个人物
虽然画面上看起来没有太大的惊喜，但是如果你是疯狂的CSS粉，Hugo Giraudel的作法反而会引起你的兴趣，他只使用了一个元素，就打造出了8 bit的人物图像，有兴趣的人可以研究看看~
维京人盾牌
由LukyVj 作出来的盾牌，会让人很难分辨就竟是使用CSS还是用影像编辑软体作出来的~
透平的icon及液态移动的选单目录效果
使用滑鼠在选单上移动，试着感受流畅的动态及具有特色设计风格，其中最特别的就是透明的icon标志。
Fluid menu with transparent icon
CSS 表情符号
bennettfeely 作了一个类似表情符号产生器的功能，让使用者可以根据喜好来选择眼睛、胡子、嘴巴、牙齿等效果，然后就能够产生具有独特个性的CSS小人物瞜。可以去玩看看。当然别忘了同时欣赏一下这件CSS作品 CSS Creatures 
Long~猫
首先，你会看到一只可爱、听着音乐在扭动身体的猫咪，你可以试着调整浏览器的宽度，猫的身体将会随着浏览器宽度而弹性的变化，从窄跟长宽度，你发现到一些可爱的动画设计了吗?
摇滚可乐
这也是一个满有去的作品，当你左右移动，慢慢的他就会看起来很像在旋转，也是一个用纯CSS作出来的作品~
计算机
一个使用CSS+Javascript打造的计算机。画面看起来平易近人~
网格动画效果
一般来说，想要设计出动画都是具有一定的困难度，因此更不用说这是用纯CSS作出来的网格相片墙~
苹果 iOS7 按钮~
由Dan Eden 经由iOS7启发而设计出来的CSS3 按钮，你可以试着去体验，看看有没有熟悉的感觉~
动态勾选按钮
Sascha Michael Trinkaus 使用渐层的方式设计出具有时尚高质感的按钮，并且，点击后会有出色的互动特效~
小黄人 简易版
这是另一个小黄人的作品，画面都是使用CSS的方式来建构，当然，他没有附加任何的效果，但是应该能感受到能用CSS调制出相当出色的作品时，会让人感受更加特别，
SVG选单效果
一个运用SVG设计出的平滑选单按钮效果 Menu toogle SVG animation
CSS遮罩效果
通常，设计遮罩效果都会搭配javascript来完成，但这个范例则是使用纯CSS来作到同样的动作~
Loader 效果
这里有许多可以应用在网页loading画面的效果，都是使用CSS来完成的~ 效果及动画设计也都相当细腻
Single Element CSS Spinners & Loaders
参考连结: hongkiat 18 Cool Things You Won't Believe Were Built Using CSS
转载自: 关于网路那些事网路趋势观察
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
