betsey

10 Amazing CodePen Demos for March 2018

原文链接: tutorialzine.com

2018年3月十大好玩的CODE PEN

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

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


donut-progress-bar.png

Donut progress bar

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


enery.png

Energy 3

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


illusion.png

Just an illusion

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


look-alive-new.png

Look Alive

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


spiral-art-new.png

Spiral Art maker

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


screen-effect.png

Live Screen Effect

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


tunnel.png

Tunnel

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


animated-form.png

Animated SVG Avatar

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


flashing-moose.png

3D flashing Moose

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


rabbit-hit-and-hide.png

Rabbit hit and hide game

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