2018年3月十大好玩的CODE PEN【www.2003.com】

2019-05-01 作者:计算机教程   |   浏览(55)

2018年3月十大好玩的CODE PEN

2018/03/06 · CSS, JavaScript · CodePen

原文出处:

SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目。由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物、小图标、小动画等等。今天我们收集了18个非常新奇有趣的SVG绘制动画,这些动画大部分都是使用SVG结合一定的CSS3特性实现而成,效果让人大为震撼,一起来看看吧。

tutorialzine   译文出处:[众成翻译

betseyliu](http://zcfy.cc/article/10-amazing-codepen-demos-for-march-2018)   

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

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


www.2003.com 1

1、HTML5 SVG实现会跳舞的花朵 4种跳舞心情

这又是一款很有趣的HTML5 SVG动画,它是一朵会跳舞的花。首先,花朵和花盆均采用SVG进行绘制,虽然是简单的线条以及单纯的颜色,但是绘制出的效果还是相当逼真的。接下来是给花朵进行跳舞动画的渲染,结合CSS3的动画属性以及JavaScript的动态渲染,让这朵花赋予了4种不同心情下的跳舞动画,点击按钮即可切换当前心情下的跳舞动画,真的是非常可爱。

www.2003.com 2

在线演示   源码下载

Donut progress bar

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


www.2003.com 3

2、jQuery SVG高端圆形菜单导航

这是一款非常富有创意的jQuery菜单导航插件,菜单项的小图标是使用SVG路径绘制而成,简单实用。同时每一个菜单项排列成一个圆圈,菜单项切换时,中间的圆圈也会随着移动,而且中间的大圆圈中会显示对应菜单项的描述和链接按钮。

www.2003.com 4

在线演示   源码下载

Energy 3

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


www.2003.com 5

3、HTML5 SVG天气预报动画卡片 可模拟多种天气

之前我们介绍过一些关于天气预报的各种应用和插件,有天气预报动画图标,比如CSS3天气预报动画图标。今天我们要分享一款基于HTML5和SVG的天气预报动画卡片,我们可以点击卡片中的天气状况按钮,即可模拟对应的天气动画,动画模拟了下雨、下雪、雷阵雨、刮风、晴天这些动画特效。

www.2003.com 6

在线演示   源码下载

Just an illusion

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


www.2003.com 7

4、HTML5 SVG实现可爱的小狗和狐狸动画

今天我们要给大家分享一款基于HTML5和SVG的动画动画,是一只可爱的小狗和一只漂亮的狐狸。我们用SVG绘制了他们的外形,并且通过HTML5脚本控制它们的轮廓在实现各种表情的切换。比如小狗会摇尾巴、吐舌头等,小狐狸可以行走,画面非常可爱。

www.2003.com 8

在线演示   源码下载

Look Alive

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


www.2003.com 9

5、HTML5 SVG实现老爷爷拄拐杖行走动画

这是一款基于HTML5和SVG的人物行走动画,图中使用SVG绘制出了一个拄着拐杖的老爷爷,描绘的活灵活现,可见目前SVG对绘图方面支持得也十分完美。另外我们又使用HTML5技术让这个老爷爷能够拄着拐杖一步步行走,这和之前我们分享的CSS3人物行走动画非常类似,怎么样,是不是很酷?

www.2003.com 10

在线演示   源码下载

Spiral Art maker

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


www.2003.com 11

6、SVG/CSS3实现按钮点击波纹动画

之前对于按钮动画,我们分享过很多基于jQuery和CSS3的鼠标滑过按钮动画,有滑过后发光的,也有波纹的,都非常不错。这次我们要分享的是一款基于CSS3和SVG的波纹按钮动画,鼠标点击按钮时,按钮上将会出项各种形状的波纹特效,一共有4组波纹动画效果。

www.2003.com 12

在线演示1 在线演示2 在线演示3 在线演示4 源码下载

Live Screen Effect

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


www.2003.com 13

7、CSS3/SVG绘制的悉尼歌剧院

这是一款基于纯CSS和SVG实现的歌剧院建筑,CSS3的强大和SVG的灵活打造了这个用不同线条勾勒的悉尼歌剧院,另外还有海面和天空中的太阳和白云也描绘的活灵活现,在网页绘制方面,除了炫酷的Canvas外,SVG也是不错的选择。

www.2003.com 14

在线演示   源码下载

Tunnel

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


www.2003.com 15

8、SVG实现吸血蝙蝠变身动画

今天我们要分享一款基于SVG的炫酷动画,它是一只可以变身为吸血僵尸的吸血蝙蝠。首先我们利用SVG的路径绘制了一只会扇动翅膀的蝙蝠,并且蝙蝠在飞行的过程中还有阴影,这样更显得具有真实感。然后随便在页面空白地方点击鼠标,飞行的吸血蝙蝠立马摇身一变,变成了一只恶魔般的吸血僵尸,这中间我们仅仅是对SVG的路径进行了切换而已。

www.2003.com 16

在线演示   源码下载

Animated SVG Avatar

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


www.2003.com 17

9、4 组有趣的 HTML5 SVG 文字播放动画

关于文字动画,我们之前介绍过不少基于jQuery和CSS3的文字特效,比如HTML5/CSS3 3D文字外翻效果HTML5/CSS3发光文字 可自定义文字色彩。今天要来分享4组有趣的HTML5 SVG 文字播放动画,利用SVG的路径描绘特性,文字的外观很有个性,同时点击按钮即可让文字通过各种动画展现在屏幕上,动画特效非常酷。

www.2003.com 18

在线演示   源码下载

本文由www.2003.com发布于计算机教程,转载请注明出处:2018年3月十大好玩的CODE PEN【www.2003.com】

关键词: