对于前端开发者而言,CodePen 一直是盛产想法与创意的圣地。它能够以在线形式,将前端代码编辑与展示。同时,你还可以与全球众多的开发者们交流想法、分享你的作品。
今天,程小狮在 CodePen 上也专门挑选了近期热门的前端项目,与前端er、设计师们分享。相信,这些优秀的作品,会让你耳目一新,或许还能带给你不少灵感呢!
Have Fun!
-
动画视差效果
--
作者:Ana Travas
使用 jQuery 插件创建视差效果,并用 CSS 动画制作的闪烁与流星。
项目地址:传送门
-
日出/日落动画
--
作者:David Khourshid
纯 CSS 还原 Dribbble 上 Denys Boldyriev 和 Andrey Pixy 所设计的日出/日落动画效果,目前只能在 Chrome 浏览器中运行。
项目地址:传送门
-
Moko's lost!
--
作者:Brook Jordan
利用 CSS 与 JS 实现的404页面——吉祥物 TradeGecko 的迷失,这风格简直萌萌哒!
项目地址:传送门
-
纯 CSS 按钮提示框
--
作者:Samuel Janes
纯 CSS 实现的4款按钮提示框,分别为蓝色、红色、绿色与紫色。
项目地址:传送门
-
可爱的狐狸
--
作者:Marcela
纯 CSS 实现 Dribbble 上可爱狐狸图标。
项目地址:传送门
-
SVG/ReactJS 实现的数学模型
--
作者:Sten Hougaard
这位作者热衷于通过数学的方式来生成图形。他使用了 ReactJS 生成了一些非常有趣的 SVG 图形,并且给出了可以自由调节的部分示例。大家来感受下。
项目地址:传送门
-
滚动 LOGO 效果
--
作者:Spencer Goldade
CSS 与 JS 实现的下拉滚动 LOGO 效果。
项目地址:传送门
-
Merry Chris-morph!
--
作者:Chris Gannon
又快到了,一年一度的圣诞节了。作者参照了由 Dmitriy Miroliubov 设计的图标,利用 CSS 与 JS 实现了圣诞动画效果。是不是很可爱呢?
项目地址:传送门
-
卧推
--
作者:Akhil Sai Ram
纯 CSS 实现的卧推效果。小狮只想说,还蛮逼真的嘛!
项目地址:传送门
-
tancerzyk CSS
--
作者:qpoziomek
纯 CSS 实现快乐的婴儿,参照了由Eran Mendel设计的舞蹈图片。
项目地址:传送门
-
吉他调音器
--
作者:Joel T Bennett
利用 CSS+JS 为 electricherald.com 网站实现的吉他调音器。点击琴弦可以发出声音哦,简直太酷了!
项目地址:传送门
-
The Wave
--
作者:Chris Coyier
纯 CSS 实现的震动效果。
项目地址:传送门
以上12个前端项目是不是有趣呢?当然,在CodePen上,这些只是冰山一角,更多的惊喜值得我们去不断地学习与挖掘。
前端开发者们,利用你手中的武器创造出新的惊喜吧!
如果觉得文章不错,不妨点个赞。_
注:本文为原创文章,转载烦请注明出处。谢谢合作!
网友评论