2017 年 CodePen 优秀作品盘点

时光荏苒,白驹过隙!又是一年将要结束,崭新的 2018 即将到来。每到年底,各大资讯网站的专题盘点让我们应接不暇,这当然少不了 CodePen 。作为知名的前端交流社区,CodePen 上的技术高手们总能不间断的为我们带来各种的惊喜。

在去年 《The Most Hearted of 2016》 的专题盘点中,涌现了像 Flexbox 游乐场、Shader 图像变换特效、纯 CSS 实现的雪橇犬等众多优秀的前端作品,我们也直观的体会到前端开发者们丰富的想象力与创造力。(注:2016 年优秀作品可以在 《2016 年 10 个最佳的 CodePen 作品》 文章中详细了解。)那么,今年 CodePen 上又沉淀了哪些创意、有趣的作品呢?随小狮一起先睹为快吧!

1. The Last Experience

The last experience 是 Gerard Ferrandez 利用 CSS+JS 制作的酷炫、有趣的机器人舞蹈动画。你可以利用鼠标对机器人进行拖拽,或是将其抛出。

项目地址:【传送门】

2. I Could Not Stop

I Could Not Stop 是一个有趣的作品。通过点击图片,你可以将图片无限的分割。每点击一次,它都可以生成 4 张更小的图片。当然,如果你没有密集恐惧症的话,你可以一直玩下去。

项目地址:【传送门】

3. Trees

这个作品叫做《树》,通过点击窗口中的画布,就可以随机生成丰富多彩的树状图形。但有了新树生成,老树也会不断地消失。

项目地址:【传送门】

4. Star Wars characters

在这个作品中,你可以通过调整窗口的大小更换星球大战中的人物角色。作品应用了 CSS 媒体查询特性进行实现。

项目地址:【传送门】

5. Winter Tidings

这是一个非常有意境的纯 CSS 作品。流畅的动画,悦耳的音乐,漂亮的图像带你探寻冬日里神秘的森林。

项目地址:【传送门】

6. Canvas Orbital Trails

一个奇妙、有趣的轨迹运动作品。你可以在屏幕上点击、拖动生成出不同的轨迹线路。

项目地址:【传送门】

7. Showcase Car

这款作品是由纯 CSS 实现的 3D 汽车模型演示。通过选择复选框的内容,你还可以看到汽车的细节与效果展示,例如打开车灯、车门、车窗等,为汽车增添阴影效果,或使其移动一圈。

项目地址:【传送门】

8. Rainbow Star Wave

彩虹星浪是一款酷炫、有趣的作品,作者 Misha Tsankashvili 利用 HTML 与 CSS 关键帧动画制作而成。你也可以在 CodePen 的编辑器中获取代码,通过调整来实现其他的形状与动画。

项目地址:【传送门】

9. The Color Averager

颜色平衡器是一个非常实用的 Demo. 通过选择两种不同的颜色,你可以看到颜色搭配后的效果。

项目地址:【传送门】

10.Chill the Lion

Chill the Lion 是一个基于 ThreeJS 制作的 WebGL 示例。它由一个像素小狮子和风扇组成,你可以移动、点击鼠标来移动风扇,并控制风量逗小狮子开心。

另外,此作者还创作了Sneeze The Dragon和Cat vs Ball of Wool等优秀的作品,有兴趣的朋友也可以看看。

项目地址:【传送门】

11.Squarebreath

这个 Demo 的作者也相当的厉害。他利用了 CSS 关键帧动画、过渡与延时属性,打造出了一个波浪式的彩色网格对齐效果。

项目地址:【传送门】

12.TinyPolyWorld

TinyPolyWorld 是基于 Three.js 制作的 3D 飞行演示。你可以在 3D 环境中利用鼠标移动飞机,体验飞机移动时的流畅动作,观察飞机的动态阴影以及色彩搭配。

项目地址:【传送门】

13. Super Speed Snowmountain Survival

又是一款利用 CSS 与 JS 实现的滑雪小游戏。只要不被树击中,你就能不断的获得分数。

项目地址:【传送门】

14.4D Perspective

这款作品将通过酷炫的动画与过渡效果,带你体验 4D 视角。

项目地址:【传送门】

15.Snake game

作为经典的益智类游戏《贪吃蛇》想必大家不会陌生,这款作品就利用 CSS 与 JS 进行了简单的重制,感兴趣的朋友可以来感受一下。

项目地址:【传送门】

感谢你的阅读。若你有所收获,欢迎点赞与分享。

注:

如需转载,烦请按下方注明出处信息,谢谢!

部分内容源自: The Best of CodePen for 2017

作者:IT程序狮

原文地址: https://zhuanlan.zhihu.com/p/32511607

责编内容来自:IT程序狮 (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » 2017 年 CodePen 优秀作品盘点

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录