2018年3月十大好玩的CODE PEN

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

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

版权声明

本译文仅用于学习、研究和交流目的,欢迎非商业转载。转载请注明出处、译者和众成翻译的完整链接。
 
本文转自:http://zcfy.cc/article/10-amazing-codepen-demos-for-march-2018
原文出处:https://tutorialzine.com/2018/02/10-amazing-codepen-demos-for-march-2018