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

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

2019-04-22 630

　　好程序员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-22

655

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-22

641

资源下载

更多资源

Mario

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

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。