2018年3月十大好玩的CODE PEN

（点击上方公众号，可快速关注）

英文：tutorialzine  译文：众成翻译/betseyliu

http://zcfy.cc/article/10-amazing-codepen-demos-for-march-2018

WEB开发社区总是不乏天才型的程序员、设计师和艺术家，正是由于他们不断推陈出新， 引领着WEB的发展。在codepen上，每天都有数以百计的优秀作品诞生。

这篇文章中， 我们将回顾下3月份的优秀codepen demo， 赶快来看看吧！

---

Donut progress bar

在这个demo中， 进度条是由"辛普森家族"成员的图片组成的，每点击下箭头， 就会出现一张新的照片。

---

Energy 3

这个充满魔性的demo展示了很多射向不同方向的线条的运动轨迹以及颜色变化， 动画很炫， 动作很酷， 颜色也很抓眼球哦！ animations, amazing movements and eye-catching colors.

---

Just an illusion

通过点击和拖动鼠标就就可以在这个demo里面绘制出一串小球体， 他们之后会围绕着Y轴旋转， 组成带有3D效果的图像。 你可以添加任意多的球体，发挥你的想象力吧！

---

Look Alive

这是一个使用WebGL和Threejs创建的人眼3D模型， 眼球可以跟随着你的鼠标箭头移动。 眼球的真实度很高， 同时阴影和光照效果也很棒！

---

Spiral Art maker

这个demo可以绘制一些有趣的辐射图形，呈现不同的动作。你可以修改线条个数， 步长、线宽、绘制速度以及其他属性。这就是个万花筒啊！

---

Live Screen Effect

这个demo展示了一个正在浏览codepen主站的笔记本，通过CSS matrix 3D 制作而成。 看起来这就像一个真正的网页， 你可以操作页面，页面滚动， 点击元素都没问题。

---

---

Tunnel

这个demo带你来一次穿越虚拟隧道的旅行，可以移动鼠标来四处观望哦！整个画面质量极高， 阴影和反射都很真实，不仅这样， 这个demo的性能也很棒， 没有卡顿！

---

Animated SVG Avatar

这个好玩的登录页面是有动态生成的SVG元素组成， 头像可以跟随者你输入信息移动，做出动画。当你输入email的时候， 它会看着你输入的内容， 而当你输入密码的时候，他就蒙住了眼镜，好萌啊！

---

3D flashing Moose

这个好玩的3D小人可以绕圈移动， 动作流畅自然，有动态的阴影和光效，动画很棒，关键是，这是一个纯CSS的demo啊！

---

Rabbit hit and hide game

打地鼠变成了打兔子游戏，看看你能得多少分吧！

觉得本文对你有帮助？请分享给更多人

关注「前端大全」，提升前端技能