18个你可能不相信是用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



作者:Specs

来源:51CTO

相关文章
|
前端开发
实训-利用HTML+CSS制作某米官网首页(二)
实训-利用HTML+CSS制作某米官网首页
210 0
实训-利用HTML+CSS制作某米官网首页(二)
|
前端开发
实训-利用HTML+CSS制作某米官网首页(一)
实训-利用HTML+CSS制作某米官网首页
290 0
实训-利用HTML+CSS制作某米官网首页(一)
|
存储 移动开发 前端开发
零基础学网页开发入门(制作博客案例)适应手机端div+css+js的综合介绍
零基础学网页开发入门(制作博客案例)适应手机端div+css+js的综合介绍
114 0
零基础学网页开发入门(制作博客案例)适应手机端div+css+js的综合介绍
|
人工智能 JavaScript 前端开发
使用 HTML、CSS 和 JS 制作一个中国象棋
这是一个简单的 JavaScript 项目,中国象棋人机对战,文末有完整源码免费下载地址,祝大家玩得开心,学得轻松。
342 2
使用 HTML、CSS 和 JS 制作一个中国象棋
|
前端开发 JavaScript 数据可视化
(web前端网页制作课作业)使用HTML+CSS制作非物质文化遗产专题网页设计与实现
(web前端网页制作课作业)使用HTML+CSS制作非物质文化遗产专题网页设计与实现
(web前端网页制作课作业)使用HTML+CSS制作非物质文化遗产专题网页设计与实现
|
前端开发 JavaScript 程序员
基于CSS的3D旋转画册的制作
这是一种使用CSS做出来的旋转效果,可用于宣传海报
基于CSS的3D旋转画册的制作
|
前端开发
HTML+CSS制作可以自适应的数据表格
HTML+CSS制作可以自适应的数据表格
HTML+CSS制作可以自适应的数据表格
|
前端开发
CSS 轻松制作 SVG 动画
如果从未在前端使用过 SVG,那么就错过了很多改善性体验,如果不知道如何使用 SVG 制作动画,那么将错过更多。本文开始制作第一个 SVG 图形,为其添加动画。
609 0
CSS 轻松制作 SVG 动画
|
前端开发 JavaScript 容器
页面制作的15个CSS技巧
本文跟大家分享一些在技术文档中很少提到的CSS属性和值,但是,在我看来,对于提高web界面开发的速度和质量特别有帮助。文章中涉及的很多特性都是实验性质的,现代浏览器基本支持了大部分了,如果在使用下面提到的属性的时候又需要兼容主流浏览器的时候,可以先查看一下Can I use。
145 0
页面制作的15个CSS技巧
|
前端开发
CSS——CSS滑动门及其应用(制作微信导航栏) ※
CSS——CSS滑动门及其应用(制作微信导航栏) ※
317 0
CSS——CSS滑动门及其应用(制作微信导航栏) ※