【年度盛宴】2012年排名前20位的 CSS 网站作品

简介:   2012年涌现出众多独特的,令人印象深刻的 CSS 网站作品,要从中挑选出年度应用 CSS 的最佳网站列表一个严峻的挑战,因为 CSS 涵盖了媒体查询(CSS3 Media Queries)、CSS 动画和3D转换等众多特性。

  2012年涌现出众多独特的,令人印象深刻的 CSS 网站作品,要从中挑选出年度应用 CSS 的最佳网站列表一个严峻的挑战,因为 CSS 涵盖了媒体查询(CSS3 Media Queries)、CSS 动画和3D转换等众多特性。我根据过去 CSS 典型的应用场景挑选了其中的优秀作品组成一个列表,如果你有收藏更好的作品,欢迎留言向大家分享。

1. Beercamp

这个啤酒节的活动网站充分应用了 3D CSS Transform 技术,充满立体感的旋转和折叠效果。

2. Spelltower

Spelltower 不仅是一个令人上瘾的游戏,它也有一个网站,充满乐趣和个性。

使用的俏皮动画和过渡效果,让你想抓住一个 iPhone 并启动游戏。

3. Envy Labs

Envy Labs 的其中一个标语是“我们创造的乐趣”。采用CSS3 Transform 和 Transition 呈现一个很有趣的旋转木马!

4. Fine Goods

这个可爱的网站组合使用各种 CSS 属性实现个性的设计。价格标签会旋转变换和动画,抽屉形式的导航个性十足,甚至会让你大吃一惊。

5. Mammoth Booth

微妙的动画,外加一些打孔的插图,转换和边框阴影让图片带给人们真实照片的感觉。

6. Postable

由 Kevin Kneifel 开发的 Web 应用程序,充满特色。聪明的悬停和过渡相结合,有趣插图让网站能够吸引用户。

7. Lift Interactive

这个网站在互动方面做了非常了不起的工作,保持良好的设计和使用各种效果兼顾得很好。

我最喜欢的是书本上的3D转换效果,鼠标悬停的时候增添了一丝的惊喜。

8. Impress a Penguin

很可爱的企鹅,创新的设计带给用户良好的故事阅读体验。

9. Microsoft

Paravel 为微软设计了一个全新的主页,这个网站最大的特色在于响应式设计。

10. Stuff & Nonsense

这个太搞了,极具创意的响应式设计!缩小浏览器窗口浏览试试,有惊喜哦!

11. Hammer

使用了让人耳目一新的鼠标悬停过渡效果,和图片传送带形成互动。

12. Lab Partners

精心策划的布局,使用非典型的旋图片传送带效果。

该网站是用于时尚艺术与设计工作室的,通过他们所选择的颜色和对细节的关注向访客传达了一个强烈的信息。

13. Always Creative

总部设在休斯顿的一个创意机构的网站,他们添加了一点点的变焦旋转效果以及很多微妙的动画。

14. Chartbeat

让你在其网站上从选择颜色和类型开始,微妙的触摸动画和转换,滚动的产品描述能够让你充满好奇。

15. OPower UX

这个创意的网页显示出一个充满个性的团队,使用各种时尚的元素和简单的图标页面告诉你其团队成员信息。

16. Circles Conference

使用各种形式的圆形元素技巧,加入强力的配色,体现了会议的相关的各种信息的网站,让人充满期待。

17. Two Paperdolls

这个优雅的网站在首页提供了两个入口途径,在鼠标悬停的时候给图像着色(默认是灰白风格)。

18. Jukely

这是网页只是一个即将发布的服务的着陆页(Landing Page),但它很有特色。

为每个元素设置的动画和渐变页面背景融合在一起,让人订阅的时候充满了惊奇和喜悦。

19. Station Four

有趣的导航设计,它采用大圆形形象的呈现主要链接。导航使用双层圆环设计,并增加了一些热点动画。

20. United Pixelworkers

这个网站今年进行了两个版本的更新,使用了奇妙的响应布局和页面排版,让你挑选衬衫的过程充满乐趣。

  

您可能感兴趣的相关文章

 

 

本文链接:年度盛宴:2012年排名前20位的 CSS 网站作品

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

 

作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。

相关文章
静态网页html+css的真ikun网站
静态网页html+css的真ikun网站
|
6天前
|
编解码 前端开发 JavaScript
【专栏:HTML与CSS实战项目篇】打造一个动态新闻网站
【4月更文挑战第30天】构建动态新闻网站,运用HTML和CSS提升编程技能和网页设计理解。项目包括首页、新闻列表页和详情页,设计简洁易用,包含顶部导航、轮播图和新闻列表。页面布局注重吸引力和易用性,色彩搭配选用冷色调为主,辅以亮色点缀。字体选择清晰易读,布局保持整洁。交互效果如轮播图、导航栏高亮和响应式设计增强用户体验。本文提供基础新闻网站构建指南,为进一步功能扩展和优化打下基础。
|
6天前
|
编解码 前端开发 UED
【专栏:HTML与CSS实践篇】响应式网站开发实战
【4月更文挑战第30天】本文探讨了响应式网站开发,它能根据用户设备自动调整布局,提供最佳浏览体验。通过HTML和CSS,利用媒体查询、Flexbox和百分比宽度等技术实现响应式设计。媒体查询按屏幕尺寸定义CSS规则,Flexbox处理元素排列。文章通过新闻网站首页设计实例,展示了如何应用这些理论,包括使用Flexbox设计导航栏,使用媒体查询调整轮播图和内容区域,以及创建自适应页脚。遵循移动优先原则,关注性能优化和用户体验,响应式设计是前端开发的关键,为多设备用户提供优质浏览体验。
|
6天前
|
前端开发 搜索推荐 SEO
【专栏:HTML 与 CSS 实践篇】使用 HTML 与 CSS 构建个人博客网站
【4月更文挑战第30天】本文介绍了使用HTML和CSS构建个性化个人博客网站的步骤。首先,规划设计网站主题、风格和结构;接着,利用HTML搭建首页、文章列表页和文章详情页的结构;然后,通过CSS设计整体风格、布局和交互效果;填充内容并进行SEO优化;最后,通过实际案例展示HTML和CSS的应用。构建博客网站不仅是展示自我和分享知识的平台,也是提升技能和创意实践的好机会。
|
7天前
|
前端开发 JavaScript UED
【前端】javascript+html+css 家具销售网站(代码+报告)
【前端】javascript+html+css 家具销售网站(代码+报告)
|
7天前
|
编解码 前端开发 JavaScript
更灵活的CSS3新特性:帮你简化样式管理和优化网站性能(三)
更灵活的CSS3新特性:帮你简化样式管理和优化网站性能
|
7天前
|
前端开发 开发者 容器
更灵活的CSS3新特性:帮你简化样式管理和优化网站性能(二)
更灵活的CSS3新特性:帮你简化样式管理和优化网站性能
|
7天前
|
移动开发 前端开发 开发者
更灵活的CSS3新特性:帮你简化样式管理和优化网站性能(一)
更灵活的CSS3新特性:帮你简化样式管理和优化网站性能
|
7天前
|
前端开发
什么是CSS Sprite,以及如何在页面或网站中使用它
什么是CSS Sprite,以及如何在页面或网站中使用它
31 1
|
7天前
|
前端开发 UED 开发者
【第19期】一文用Tailwind CSS写自己的网站
【第19期】一文用Tailwind CSS写自己的网站
66 0