请选择 进入手机版 | 继续访问电脑版

好程序员-千锋教育旗下高端IT职业教育品牌

400-811-9990
我的账户
好程序员

专注高端IT职业培训

亲爱的猿猿,欢迎!

已有账号,请

如尚未注册?

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

[复制链接]
叶子老师 发表于 2019-4-23 16:17:01 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
  好程序员web前端培训分享18个用CSS制作出来的东西与流行的看法相反,CSS不仅仅是用来提供一个WEB页面的基本风格,以使它看起来更有吸引力。还有很多其他的事情,CSS也可以做的很好。由于它创建动画和交互的能力,CSS集合HTML以及JavaScriptWEB开发者提供了尝试不同方法的机会。
  浏览器就像一个空的画布,WEB开发者可以在这里尽情的发挥。下面是18个人们用CSS创建的又酷又有创造性的东西的例子,从原始字符到有趣的动画,有很多激励你自己将时间花费在CSS上。
  1.TheSimpsons
  ChrisPattle使用纯CSS创建了Simpsons家族。他把每个角色的脸部拆分成很小的形状,然后又拼接回去。他甚至给角色的眼睛添加了动画来赋予它们生命力。
  2.MinionsWithPureCSS
  如果你看过电影《DespicableMe(神偷奶爸)》,那你一定对其中的Minion(小黄人)印象深刻。AmrZakaria用纯CSS实现了其中的几个Minion,它们会用闪烁的眼睛和友好的手势给你打招呼。
  3.Brokenneonsign
  这是用CSStext-shadow实现破碎的霓虹灯效果的例子。把鼠标放到单词上,注意字母“c”、“n”和“i”的变化。
  4.MmmCheese
  这是一块奶酪还是?HugoGiraduelCSS制作了这个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
  CSSMuseCSS实现圆、五角形、六角形。
  18.LoadersKit
  这些是用纯CSS实现的加载样式。如果你想减小带宽的使用,基于CSS的加载样式将会非常的好用。
好程序员web前端培训官网:http://www.goodprogrammer.org/html5_class.shtml

精彩内容,一键分享给更多人!
回复

使用道具 举报

您需要登录后才可以回帖

本版积分规则

关注我们
好程序员
千锋好程序员

北京校区(总部):北京市海淀区宝盛北里西区28号中关村智诚科创大厦

深圳西部硅谷校区:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619

杭州龙驰智慧谷校区:浙江省杭州市下沙经济技术开发区元成路199号龙驰智慧谷B座7层

郑州校区:郑州市二七区航海中路60号海为科技园C区10层、12层

Copyright 2007-2019 北京千锋互联科技有限公司 .All Right

京ICP备12003911号-5 京公安网11010802011455号

请您保持通讯畅通1对1咨询马上开启