ITPub博客

首页 > 应用开发 > Html/css > 好程序员web前端分享18个用CSS制作出来的东西

好程序员web前端分享18个用CSS制作出来的东西

原创 Html/css 作者:好程序员IT 时间:2019-04-23 16:16:57 0 删除 编辑

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

 

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

 

  1.TheSimpsons

 

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

 

  2.MinionsWithPureCSS

 

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

 

  3.Brokenneonsign

 

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

 

  4.Mmm Cheese

 

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

 

  5.SingleElementCSScharacter

 

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

 

  6.VikingShield

 

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

 

  7.Fluidmenuwithtransparenticon

 

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

 

  8.CSSCreatures

 

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

 

  9.LongCat

 

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

 

  10.RollingcokeCan

 

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

 

  11.Calculator

 

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

 

  12.GridAnimationEffect

 

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

 

  13.SmoothiOS7toogle

 

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

 

  14.Animatedcheckmarkbutton

 

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

 

  15.Minion

 

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

 

  16.MenutoogleSVGanimation

 

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

 

  17.Shapemasking

 

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

 

  18.LoadersKit

 

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


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69913892/viewspace-2642280/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论
欢迎关注公众号:好程序员特训营 web前端教程分享 723729549 大数据教程分享 703503210

注册时间:2019-03-20

  • 博文量
    539
  • 访问量
    338418