阅读更多

3顶
1踩

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.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的加载样式将会非常的好用。



via:hongkiat,本文由 Specs 翻译整理。
译文来自:Coder资源网
  • 大小: 19.4 KB
  • 大小: 28.7 KB
  • 大小: 14.8 KB
  • 大小: 7.2 KB
  • 大小: 26.6 KB
  • 大小: 15.6 KB
  • 大小: 16.8 KB
  • 大小: 14.2 KB
  • 大小: 13.6 KB
  • 大小: 18.8 KB
  • 大小: 13.4 KB
  • 大小: 25.1 KB
  • 大小: 2 KB
  • 大小: 8.4 KB
  • 大小: 11.8 KB
  • 大小: 2 KB
  • 大小: 22.8 KB
  • 大小: 8.3 KB
来自: Coder资源网
3
1
评论 共 3 条 请登录后发表评论
3 楼 luckychongxiao08 2015-08-26 09:54
很厉害呀!求指教!!
2 楼 sp42 2015-08-22 11:01
又如何?实际项目用得上吗
1 楼 dsjt 2015-08-19 17:08
太疯狂了。
不可思议

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • UTF8与ansi string转换处理(DELPHI7开发)

    delphi 开发的UTF8 ansistring转换动态库。 通过DELPHI与C++测试。 前面上传的资源未经过仔细验证,有问题,不好意思,重新修正上传

  • 2.3 Windows驱动开发:内核字符串转换方法

    在内核编程中字符串有两种格式与,这两种格式是微软推出的安全版本的字符串结构体,也是微软推荐使用的格式,通常情况下代表的类型是char *也就是ANSI多字节模式的字符串,而则代表的是wchar*也就是UNCODE类型的字符,如下文章将介绍这两种字符格式在内核中是如何转换的。在Windows内核中,字符串的处理十分重要。不同于用户态程序,内核中的字符串必须遵循严格的安全规则,以确保不会引发各种安全漏洞。和是微软在内核中推出的两种安全版本的字符串结构体,代表的是ANSI多字节模式的字符串,而则代表的是。

  • AnsiString用法

    C++Builder 6.0 AnsiString 用法,实例

  • string类简介

    IOS/ANSIC++标准通过添加string类拓展了C++库,因此现在可以用string类型的变量(c++中称为对象)而不仅是字符数组来储存字符串,string类使用起来比数组简单,同时也提供了将字符串组作为一种数据类型的表示方式。使用string对象的方式与字符数组相同,但是类设计让程序可以自动处理string的大小,因此与数组相比string对象也更加安全。string类简化了子字符串的合并操作可以使用运算符+将两个string对象合并起来,还可以用运算符+=将字符串附加到string对象的末尾。..

  • 关于AnsiSting的使用大全(转自ChinaBCB)

    Ansistring 转 char 代码: void __fastcall TForm1::Button1Click(TObject *Sender) { ? ? AnsiString Test = "哈哈"; ? ? char *chr = Test.c_str(); } ? ?char转Ansistring 代码: #include void __fastcall TFor

  • AnsiString的基本用法 bcb第一弹

    最近由于处在半转型状态,学bcb也是模模糊糊。 由于在学C++builder,ansistring是bcb中提供的类跟java中的String差不多  但是,比c++ 中的String在bcb中据说好用多了,在网上转了一篇anstring的用法。我发现这个bcb网上资料不怎么多啊,特别是组件方面的具体用法。以后,可能发一些组件的具体操作吧。 以下是转贴能容,感谢原作者的努力: /

  • C++builder 6.0转RAD studio(C++builder 2009及以上)常见问题处理

    1、提示没有Tserversocket 解决办法: 默认情况下TClientSocket、TServerSocket这两个控件是没有安装到控件面板上,需要手动安装: ComponentInstall packagesAdd 找到$(BDS)\Bin\dclsockets140.bpl,这个文件,点击"OK"。 在INTERNET组件组中出现这两个控件。

  • Delphi7中 string, AnsiString, Utf8String,WideString的区别分析

    Windows系统上的 Notepad.exe 打开文件后,点击“文件”菜单中的“另存为”命令,会跳出一个对话框,在最底部有一个“编码”的下拉条。 里面有四个选项:ANSI,Unicode,Unicode big endian 和 UTF-8。 1)ANSI是默认的编码方式。对于英文文件是ASCII编码,对于简体中文文件是GB2312编码(只针对Windows简体中文版,如果是繁体中文版会采用Bi...

  • ansistring使用大全

    ansistring 使用大全: 顾名思义,就是利用ansistring来处理相关的各种问题。来看看吧,一定让你受益匪浅!  //ansistring 转 char void __fastcall tform1::button1click(tobject *sender) {       ansistring test = "哈哈";       char *chr = test.c_st

  • C++ builder之 字符串转换

    //Ansistring 转char void __fastcall TForm1::Button1Click(TObject *Sender) {     AnsiString Test = "哈哈";     char *chr = Test.c_str(); }     //char转Ansistring #include void __fastcall TForm1

  • Ansistring 使用大全

     //Ansistring 转 char void __fastcall TForm1::Button1Click(TObject *Sender) {     AnsiString Test = "哈哈";     char *chr = Test.c_str(); }     //char转Ansistring #include void __fastcall TForm1::Button1

  • AnsiString方法

     //Ansistring 转 char void __fastcall TForm1::Button1Click(TObject *Sender) { AnsiString Test = "哈哈"; char *chr = Test.c_str(); } //Bool转AnsiString void __fastcall TForm1::Button1Click(TObject *Sende

  • C++ Builder 初学问与答(十六)

    16.C/C++语言在CB中的一些特定用法       2)AnsiString是从Delphi中引进来的吗?   答:CB的核心组件VCL是用Object Pascal语言写出的,所以CB的VCL组件的属性有很多都是使用long string,例如:Text、 Name、Caption等属性都是使用Object Pascal的long string。基于此关系,CB只好建立了和Obje

  • AnsiString

    AnsiString类是BCB中最常见类之一,了解它对以后深入学习BCB大有帮助。 介绍AnsiString类之前,先要介绍一些背景知识。VCL(Visual Component Library 可视化组件库)大量利用Pascal长字串数据类型,几乎所有基于文本的VCL属性都采用Pascal长字串。例如,Text、Name和Caption属性都是Pascal长字串属性。VC...

  • AnsiString类

            介绍AnsiString类之前,先要介绍一些背景知识。VCL大量利用Pascal长字串数据类型,几乎所有基于文本的VCL属性都采用Pascal长字串。例如,Text、Name和Caption属性都是Pascal长字串属性。VCL的许多构件方法和事件处理函数也采用Pascal长字串。关于Pascal长字串数据类型要注意两点。第一,Pascal长字串是真正的语言数据类型,而不象C/C+

Global site tag (gtag.js) - Google Analytics