好程序员web前端分享18个用CSS制作出来的东西
好程序员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的加载样式将会非常的好用。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
阿里云开放搜索实践,使用阿里云开放搜索来做网站站内搜索
阿里云的开放搜索已经做得很完善了,现在阿里云集成了开放搜索,只要定义好表结构,上传数据,就会自动生成索引,马上就可以搜索了,简直可以做个搜索引擎了。一起来看看。 阿里云开放搜索介绍及购买页 首先,创建一个应用 表结构很简单,就一个主键id,一个text字段msg 添加数据源,数据源可以是RDS数据库,可以是json上传,也可以上传文件,这里是上传文件: 文件格式是这样的,与表结构一致: [ { "fields": { "id": 124, "msg": "根据性jquery的对各种深度学习类型典利他型站点的调研而制定的一套具有一定扩展性jquery的结构化数据搜索方案,能覆盖该类型95%以上的数据属性,支持专属词表配置、排序公式定制,并提供良好的相关性、丰富的检索方式,以及多维度的过滤、排序及统计。用户可以通过选择模版的方式来节省定制工作量。" }, "cmd": "ADD" }, { "fields": { "id": 2, "msg": "搜索引擎是指根据一定的策略、运用特定的计算机程序从互联网上搜集信息,在对信息进行组织和处理后,为用...
- 下一篇
SqlServer 将纯数字的时间转换为DateTime
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...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS7设置SWAP分区,小内存服务器的救世主
- CentOS7安装Docker,走上虚拟化容器引擎之路
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- CentOS8安装Docker,最新的服务器搭配容器使用
- SpringBoot2整合Redis,开启缓存,提高访问速度
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- Docker安装Oracle12C,快速搭建Oracle学习环境
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7