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

与流行的看法相反,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. 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. 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

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

18. Loaders Kit

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

文章转载自 开源中国社区 [http://www.oschina.net]

时间: 2024-12-22 00:51:15

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

《HTML 5与CSS 3权威指南 》 (第2版·下册)——第18章 CSS 3

第18章CSS 3概述 18.1 概要介绍18.2 使用CSS 3能做什么 从2010年开始,HTML 5与CSS 3就一直是互联网技术中最受关注的两个话题.2010年MIX10大会上微软的工程师在介绍IE9时,从前端技术的角度把互联网的发展分为三个阶段:第一阶段是Web 1.0的以内容为主的网络,前端主流技术是HTML和CSS:第二阶段是Web 2.0的Ajax应用,热门技术是JavaScript/DOM/异步数据请求:第三阶段是即将迎来的HTML 5+CSS 3的时代,这两者相辅相成,使互联

18万元Apple Watch闪瞎眼:配玫瑰金及15.14克拉钻石

[环球科技综合报道]据科技博客Ubergizmo12月16日报道,苹果的产品从来都是价格不菲,而即将推出的AppleWatch也绝不例外.AppleWatch最低定价350美元(约2170人民币),远高于市面上其他智能手表.而其他型号价格尚未揭晓,就有传闻高端型号AppleWatchEdition售价可能高达5000美元(约3万人民币),简直要加入奢侈手表的行列了.18万元Apple Watch闪瞎眼:配玫瑰金及15.14克拉钻石话虽如此,你如果觉得350美元的手表已经够贵了,那美国钻石品牌Me

用CSS和jQuery制作霓虹效果

今天我们为大家准备的JS+CSS霓虹灯效果,让你的文字像灯一样每一分每一秒都变色. 今天我们要用CSS和jQuery制作霓虹效果.现在我们开始第一步,制作一个背景.其中有2个不同颜色的文字版本.要生成五颜六色的背景图象,您首先需要新建的Photoshop文件650px和300px文档,#141414的背景颜色. 使用您喜爱的字体写您的标题. 我使用了哥特式的世纪与60px的大小.然后Ctrl点击他,变成选区. 使用矩形工具,按Shift+Alt选择文本,如下图: 然后复制出一个新的图层: 在用具

设计一个基于CSS的网页模板

css|模板|设计|网页 这是一个教你如何一步一步学习建立基于CSS制作网站的开始,这个教程将由几个部分组成.第一部分是讲述如何在photoshop中制作导航按扭的:第二部分将讲述背景的制作,再下一个是讲述标题(header)和页面的设计规划的,在最后是CSS和XHTML的应用的执行.现在也许有些人想知道为什么在我的教程里要以导航按扭的制作来开始,呵呵,其实我最初的目的是要讲述一段关于这些简单按扭的制作方法的小教程的,但是即然这个想法开始了,为什么不做一个全面的讲解呢!建立一个像玻璃面一样的导航

分享:CSS使用技巧20则

css|技巧 1. CSS字体属性简写规则 一般用CSS设定字体属性是这样做的: font-weight: bold;font-style: italic;font-varient: small-caps;font-size: 1em;line-height: 1.5em;font-family: verdana,sans-serif 但也可以把它们全部写到一行上去: font: bold italic small-caps 1em/1.5em verdana,sans-serif 真不错!只有

学习网页技术CSS样式表整理的20个技巧

css|技巧|网页|样式表 1. CSS字体属性简写规则 一般用CSS设定字体属性是这样做的: font-weight: bold;font-style: italic;font-varient: small-caps;font-size: 1em;line-height: 1.5em;font-family: verdana,sans-serif 但也可以把它们全部写到一行上去: font: bold italic small-caps 1em/1.5em verdana,sans-serif

从中国漫画到动画:《梦里人》的动画进程

进程     根据漫画改编的电视连续剧动画片<梦里人>已经完成并即将播出,在此先向大家进行一个汇报. 一.漫画作品的选择     漫画和动画都是受到普遍热爱的流行艺术,经常在一起出现.漫画和动画虽然说起来是近亲,有着各种各样的联系,但它们仍然是两个不同的艺术表现形式.一个题材和风格可能不错的漫画,不一定就适合改编成动画.任何艺术种类都有最适合自己的表达方式,因为它们有自己的特殊语言.漫画的内容表现是平面的,靠一幅幅静止的画面加上一些文字来讲故事,而动画的画面是立体运动的,它还有声音的加入.漫画

通过css和jQuery实现facebook底部的管理面板

近几年社交性网站变的越来越火,facebook在社交网站里面排名是靠前的.facebook里面有很多Ajax做的特效和功能给人深刻的印象.它底部的管理面板是我尤其喜欢的一个.它几乎将使用最多的功能链接都展现.组织在这里.这周我将通过第一部分介绍如何通过css和jQuery实现facebook底部的管理面板效果.part 1 演示 最终演示 第一部分:结构和信息提示框--html&css管理面板的结构使用无序列表ul创建.最后两个li列表(Alert Panel & Chat Panel)将

Fireworks教程:制作涂鸦效果

教程 作品名称:<涂鸦·雨后·厕外> 作品意念:表现前现代年青人玩世不恭,些许颓废,酷爱生命的态度. 本作品需要:插件:EyeCandy4.0滤镜字体:cold night for alligators.ttf  KR Heartalicious.ttf  SEXY_SPANISH.ttf(警告:未满18岁勿用该字体) 1. 厕所外墙的绘画观察下图,可以看出主要制作三样东西 厕所的墙 厕所的字 厕所的青苔. 在这一节里,你将学会如何绘画如此仿真的厕所外墙! 1.1新建一个800*600px的画