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

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

2019-04-22 560

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

微信关注我们

原文链接：https://yq.aliyun.com/articles/699548

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

阿里云开放搜索实践，使用阿里云开放搜索来做网站站内搜索

阿里云的开放搜索已经做得很完善了，现在阿里云集成了开放搜索，只要定义好表结构，上传数据，就会自动生成索引，马上就可以搜索了，简直可以做个搜索引擎了。一起来看看。阿里云开放搜索介绍及购买页首先，创建一个应用表结构很简单，就一个主键id，一个text字段msg 添加数据源，数据源可以是RDS数据库，可以是json上传，也可以上传文件，这里是上传文件：文件格式是这样的，与表结构一致： [ { "fields": { "id": 124, "msg": "根据性jquery的对各种深度学习类型典利他型站点的调研而制定的一套具有一定扩展性jquery的结构化数据搜索方案，能覆盖该类型95%以上的数据属性，支持专属词表配置、排序公式定制，并提供良好的相关性、丰富的检索方式，以及多维度的过滤、排序及统计。用户可以通过选择模版的方式来节省定制工作量。" }, "cmd": "ADD" }, { "fields": { "id": 2, "msg": "搜索引擎是指根据一定的策略、运用特定的计算机程序从互联网上搜集信息，在对信息进行组织和处理后，为用...

2019-04-23

584

SqlServer 将纯数字的时间转换为DateTime由于数据库存的是整个字符串组到一起了，C#代码是这个样子的。复制代码public static string time(DateTime dt) { return dt.Year.ToString() + ((Convert.ToInt32(dt.Month) < 10) ? "0" + dt.Month.ToString() : dt.Month.ToString()) + ((Convert.ToInt32(dt.Day) < 10) ? "0" + dt.Day.ToString() : dt.Day.ToString()) + ((Convert.ToInt32(dt.Hour) < 10) ? "0" + dt.Hour.ToString() : dt.Hour.ToString()) + ((Convert.ToInt32(dt.Minute) < 10) ? "0" + dt.Minute.ToString() : dt.Minute.ToString()) + ((Convert.ToIn...

2019-04-23

559

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Oracle

Oracle Database，又名Oracle RDBMS，或简称Oracle。是甲骨文公司的一款关系数据库管理系统。它是在数据库领域一直处于领先地位的产品。可以说Oracle数据库系统是目前世界上流行的关系数据库管理系统，系统可移植性好、使用方便、功能强，适用于各类大、中、小、微机环境。它是一种高效率、可靠性好的、适应高吞吐量的数据库方案。

Apache Tomcat

Tomcat是Apache 软件基金会（Apache Software Foundation）的Jakarta 项目中的一个核心项目，由Apache、Sun 和其他一些公司及个人共同开发而成。因为Tomcat 技术先进、性能稳定，而且免费，因而深受Java 爱好者的喜爱并得到了部分软件开发商的认可，成为目前比较流行的Web 应用服务器。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。