资讯频道 → Web前端
阅读更多

0顶
0踩

Web前端

转载新闻 2016 年 10 个最佳的 CodePen 作品

2017-01-22 11:28 by 副主编 jihong10102006 评论(0) 有7752人浏览
CSS Shader Flexbox SVG
说到 CodePen，前端开发者们肯定不会陌生。如果说 Dribbble 是设计师们聚集的圣地，那么 CodePen 则是前端开发者们约“码”的天堂。它不仅提供给你了一个 Showcase 的平台，而且能够开拓你的视野 —— 你能够及时的了解最新前端技术的应用，同时帮助交互设计师找寻更多的灵感。

年终盘点向来是各大网站、社区的重头戏。当然，与往年一样 CodePen 也出了期名为《The Most Hearted of 2016》的专题。专题中盘点了 2016 年 100 个最受欢迎的 Pens，让我们在惊叹前端开发者创造力的同时，也能够学习一些新的技术，捕捉一些新的想法。

在本文中，程小狮专门挑选了排名前 10 的作品与大家分享，希望这些作品能够给你一定的启发和帮助。话不多说，来 Enjoy 吧！

TOP 10：SVG 动画
作者为其网站设计的 SVG 动画。灵感源自有趣的 Creogram 动画。不得不说，这动画会让你耳目一新。

作品地址：传送门

TOP 9：SVG 路径剪裁悬停效果
作者利用 SVG 路径剪裁属性与 CSS Transitions 重新制作了 CJ Gammon 网站中组合网格的悬停效果，一起来感受下。

作品地址：传送门

TOP 8：多层视差图
这是一个利用 CSS 与 JavaScript 实现的多层次视差图像。作者在 medium 上详细记录了实现的整体思路与方法。这个教程比较适合初学者，喜欢的朋友不妨去学习一下。

作品地址：传送门

TOP 7：酷炫的链式动画布局
这个作品基于 Dribbble 上卫星网站的原型创作而成。作者通过在 JavaScript 中添加了两个类以及简单的悬停效果，呈现出酷炫的链式动画布局。它具备良好的性能，同时使用 SCSS 编写也易于维护。

作品地址：传送门

TOP 6：纯 CSS 实现 Scroll Indicator 效果
在这个作品中，作者利用纯 CSS 实现了滚动指示器效果。或许你会觉得利用纯 CSS 来实现有点不可思议，那么推荐你看这篇文章，相信你会学到很多。

作品地址：传送门

TOP 5：渐近式琶音器
年前，程小狮在 CodePen 上看到了一个作品。作者利用 CSS 与 JavaScript 实现了吉他调音器的效果。当时，我已经感觉相当炫酷了。但这次看到了这个渐近的琶音器，吓得我直接跪了。我只想说，歪果仁真是太会玩咧！

在作品中，作者利用了音阶生成器 、琶音模式生成器以及 Tone.js 融入至前端三剑客（HTML/CSS/JS）制作而成。快来感受下吧！

作品地址：传送门

TOP 4：构建生平事迹页面
这个作品利用 HTML 与 CSS 实现了诺曼•欧内斯特•博洛格博士的生平事迹页面。作品中，技术层面没有太大的出彩，但博士的事迹与影响足以让大家纷纷点赞。

作品地址：传送门

TOP 3：纯 CSS 实现的雪橇犬
此作品的作者 David Khourshid 利用纯 CSS 还原了插图设计师 Alexey 与创意总监 Ryan的动效图。惟妙惟肖的雪橇犬，是不是很可爱呢？

作品地址：传送门

TOP 2：Shader 图像变换特效
对于 THREE.js 这个 WebGL 第三方库，相信大多数朋友都使用过。在这个作品中，作者便扩展了 THREE.js 中的 MeshPhongMaterial 实现了动画的任意变换。另外，他还利用 THREE.js 实现了文本变换。而此作品也是基于文本变换而来的。

作品地址：传送门

NO.1：Flexbox 游乐场
在这个作品中，作者为大家展示了 Flex 容器属性与项目属性的应用。从此，麻麻再也不用担心我学不会 Flexbox 了。另外，初学 Flexbox 的朋友也可以看看阮一峰的Flex 布局教程。

作品地址：传送门
以上就是本文的所有分享。作品中的相关代码，大家可以自行观看、学习。最后，好的代码需要大量的思考与实践，愿你也能写出一手实用、漂亮的代码。
  • 大小: 12.2 KB
  • 大小: 63.7 KB
  • 大小: 116.4 KB
  • 大小: 105.9 KB
  • 大小: 148 KB
  • 大小: 98.7 KB
  • 大小: 143.8 KB
  • 大小: 52.7 KB
  • 大小: 246.6 KB
  • 大小: 90 KB
来自: 知乎
0
顶
0
踩
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • CodePen 作品秀：Canvas 粒子效果文本动画

    　CodePen 作品秀系列向大家展示来自 CodePen 网站的最优秀的 Web 效果，上面的那些 Demo 可以说都是艺术品，相信你看之后和我一样会被惊呆的！（为保证最佳的效果，请在 Chrome、Firefox 和 Safari 等现...

  • 赞！15个来自 CodePen 的酷炫 CSS 动画效果

    CodePen 是一个在线的前端代码编辑和展示网站，能够编写代码并即时预览效果。你在上面可以在线分享自己的 Web 作品，也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果。 今...

  • 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

    CodePen 是一个在线的前端代码编辑和展示网站，能够编写代码并即时预览效果。你在上面可以在线分享自己的 Web 作品，也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果。 　今天这篇文章为大家...

  • 大显身手 | Flutter CodePen 挑战赛来了！

    CodePen 社区将选出最佳画笔并在 CodePen 的主页上进行展示。 第一周挑战赛已于 2020 年 7 月 6 日周一启动。 本周主题 在第一周，我们将从 Flutter 中最基本的构建块入手: Stack widget。Stack 可以按照绘制顺序将...

  • html炫酷在线,小伙伴们都会惊呆的10个超炫的HTML5+CSS3效果作品

    在CodePen(CodePen 是一个在线的HTML、CSS和JavaScript代码编辑器，能够编写代码并即时预览效果)上看到许多非常炫的html+css3效果示例...这篇文章就为大家挑选了10个超炫的HTML5+CSS3效果作品演示，这些 Demo 可以说...

  • 2023年程序员必须知道的10大代码网站！

    Codepen 是展示的作品并了解其他人在网络上做什么令人惊奇的事情的最佳网站。还可以检查其他人的笔，这意味着可以从此处查看其他开发人员的代码。例如，如果要将选项卡添加到项目中，可以检查链接选项卡，根据自己...

  • 全球100位最佳工程师，开发人员，编码人员和企业家，可以在线关注他们的github,推特，网站等

    想象一下，你可以与比尔·盖茨，詹姆斯·高斯林，鲍勃叔叔，埃隆·马斯克，昆西·拉尔森以及其他杰出的工程师，...在下面，将看到100个启发开发人员的伟大思想的清单。该列表是通过对400位开发人员进行的调查得出的。

  • 10年技术招聘经验的面试官，教你如何选技术人才

    成为10x开发者的最佳方法是帮助其他5个开发者成为2x开发者。 结论 现在是时候调整技术招聘的态度了。 Instead of looking for reasons to reject candidates, we need to look for reasons to hire them. 与其寻找...

  • 12 款适用于开发人员的最佳 Web 开发软件

    好吧，没有必要担心，因为我们可以利用技术来创建一个功能齐全且美观的网站，并使用正确的 Web 开发或设计软件。 这里列出了 12 款最好的网站开发软件，包括免费和付费。它们将使您能够毫不费力地创建、编辑和更新...

  • noip2014:螺旋矩阵_网页设计：2014年值得关注的20个最热门趋势

    在不同的网站上花费了数小时的时间后，您... 在这篇文章中，我想分享20种增长趋势，希望在2014年内开花 。 许多已经启动，而其他一些才刚刚开始。 查看新趋势很有趣，看看它们能坚持多久 。 在2014年浏览网站时，...

  • web前端开发专业课程，10大前端常用算法

    它由其团队定义如下： CodePen是一个社会发展环境。从本质上讲，它允许您在浏览器中编写代码，并在构建时查看其结果。一个有用且自由的在线代码编辑器，适合任何技能的开发人员，尤其是增强了学习代码的人员的能力。...

  • 12个作为开发人员你会喜欢的网站

    网站现在是每个企业的必备工具。如果你是一名网站开发人员，需要寻找新的材料或资源，那么这里就是你需要的地方。作为一名开发人员，很难找到一个可以提供你所需所有资源和信息的网站。本文将介绍12个开发人员会喜欢...

  • 设计一个前端组件库，需要具备哪些能力？

    大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群在研究生的时候用 Vue2.0 做过一个守望先锋UI库。当时很沉迷《守望先锋》，有一天...

  • 【java毕业设计】智慧社区教育服务门户.zip

    有java环境就可以运行起来 ,zip里包含源码+论文+PPT, 系统设计与功能： 文档详细描述了系统的后台管理功能，包括系统管理模块、新闻资讯管理模块、公告管理模块、社区影院管理模块、会员上传下载管理模块以及留言管理模块。 系统管理模块：允许管理员重新设置密码，记录登录日志，确保系统安全。 新闻资讯管理模块：实现新闻资讯的添加、删除、修改，确保主页新闻部分始终显示最新的文章。 公告管理模块：类似于新闻资讯管理，但专注于主页公告的后台管理。 社区影院管理模块：管理所有视频的添加、删除、修改，包括影片名、导演、主演、片长等信息。 会员上传下载管理模块：审核与删除会员上传的文件。 留言管理模块：回复与删除所有留言，确保系统内的留言得到及时处理。 环境说明： 开发语言：Java 框架：ssm，mybatis JDK版本：JDK1.8 数据库：mysql 5.7及以上 数据库工具：Navicat11及以上 开发软件：eclipse/idea Maven包：Maven3.3及以上

  • 基于selenium的携程机票爬虫资料齐全+详细文档+高分项目+源码.zip

    【资源说明】 基于selenium的携程机票爬虫资料齐全+详细文档+高分项目+源码.zip 【备注】 1、该项目是个人高分项目源码，已获导师指导认可通过，答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用，也可作为毕业设计、课程设计、作业、项目初期立项演示等，当然也适合小白学习进阶。 4、如果基础还行，可以在此代码基础上进行修改，以实现其他功能，也可直接用于毕设、课设、作业等。 欢迎下载，沟通交流，互相学习，共同进步！

  • 【java毕业设计】智慧社区宠物管理系统（源代码+论文+PPT模板）.zip

    zip里包含源码+论文+PPT,有java环境就可以运行起来 ,功能说明： 文档开篇阐述了随着计算机技术、通信技术和网络技术的快速发展，智慧社区门户网站的建设成为了可能，并被视为21世纪信息产业的主要发展方向之一 强调了网络信息管理技术、数字化处理技术和数字式信息资源建设在国际竞争中的重要性。 指出了智慧社区门户网站系统的编程语言为Java，数据库为MYSQL，并实现了新闻资讯、社区共享、在线影院等功能。 系统设计与功能： 文档详细描述了系统的后台管理功能，包括系统管理模块、新闻资讯管理模块、公告管理模块、社区影院管理模块、会员上传下载管理模块以及留言管理模块。 系统管理模块：允许管理员重新设置密码，记录登录日志，确保系统安全。 新闻资讯管理模块：实现新闻资讯的添加、删除、修改，确保主页新闻部分始终显示最新的文章。 公告管理模块：类似于新闻资讯管理，但专注于主页公告的后台管理。 社区影院管理模块：管理所有视频的添加、删除、修改，包括影片名、导演、主演、片长等信息。 会员上传下载管理模块：审核与删除会员上传的文件。 留言管理模块：回复与删除所有留言，确保系统内的留言得到及时处理。

  • 免费下载：Civil War (Stuart Moore)_xVBgd.zip

    免费下载：Civil War (Stuart Moore)_xVBgd.zip

  • JSP基于WEB的图书馆借阅系统的设计与实现(源代码+论文)(2024pw).7z

    1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于计算机科学与技术等相关专业，更为适合；

  • 免费下载：Spider-Man (Stefan Petrucha)_2pBuA.zip

    免费下载：Spider-Man (Stefan Petrucha)_2pBuA.zip

Global site tag (gtag.js) - Google Analytics