推荐8款HTML5相关的特殊效果

淩亂°似流年 2022-08-26 04:50 26阅读 0赞

[![3d835206-f6b4-405d-a23b-82e47e944364.jpg][]][3d835206-f6b4-405d-a23b-82e47e944364.jpg 1]

[HTML5][]是HTML的升级版，[HTML5][]有两大特点：首先，强化了 Web 网页的表现性能。其次，追加了本地数据库等 Web 应用的功能。广义论及[HTML5][]时，实际指的是包括HTML、[CSS][]和[JavaScript][]在内的一套技术组合。今天我们推荐8款使用HTML5生成的特殊效果，希望可以对大家的使用带来帮助！

## [HTML5实现的五子棋游戏 ][HTML5_]    ##

[![f9b5a1b1-156c-4c3b-9fe4-019c99d6fe24.jpg][]][HTML5_]

## [在线演示][Link 1]    ##

这是一款使用[HTML5][]实现的五子棋特效，与计算机的对局你不见得能次次都赢得胜利，不信可以点击在线演示。

## [一款不需要视频文件的视频播放器-Frame player ][-Frame player]    ##

[![896febb2-ad92-427e-8dac-a901d0a851c9.jpg][]][-Frame player]

## [在线演示][Link 2]    ##

[HTML5][]视频是非常棒的，它可以很容易的用在多款设备上。但是它也有自己的问题，比如移动设备的播放器，可能有不同版本不兼容的情况。今天我们介绍这款视频播放器完善了之前的效果，用起来更方便。希望大家喜欢！

# [3D菜单 ][3D_]    #

[![a6efbfc5-cb0c-4668-ab96-c8c243e7ab0e.jpg][]][3D_]

## [在线演示][Link 3]    ##

或许在现如今这个科技发达的时代，在线点餐已不是新鲜事。餐厅可以对Menu进行设计，点击菜名会相应弹出菜品的照片，或者还可以增加卡路里，原材料和客户们的评价等。绝对是一个超时髦的创意！

## [用HTML5的画布实现撕布的动画效果 ][HTML5_ 1]    ##

[![60e6656d-ef39-4a58-b8b9-9cbde6b6e558.jpg][]][HTML5_ 1]

## [在线演示][Link 4]    ##

用[HTML5][]的画布实现撕布的效果，滑动鼠标，布会随着鼠标变动。点击鼠标左键，然后滑动鼠标，布就会被割开。如果你还没有查看过这款演示效果，那绝对逼真的让你震撼！

# [HTML5 Canvas(画布) 基础使用和介绍 ][HTML5 Canvas_ _]    #

[![e29e4ebe-7a13-486a-9435-44b607205ec3.jpg][]][HTML5 Canvas_ _]

## [在线下载][HTML5 Canvas_ _]    ##

还记得在过去的Web前端开发中，如果你需要绘图或者生成相关图形的话，使用Flash可能是你唯一或者说最强大的实现方式，而在近些年的技术热点HTML5标准中，[HTML Canvas][]（画布）能够更加方便的帮助你实现2D绘制图形图像及其各种动画效果功能。在今天的这篇技术教程中我们将介绍基本的Canvas使用，希望大家觉得有帮助！

## [HTML5画布生成的2D光源效果 ][HTML5_2D_]    ##

[![490a7f00-90b8-44ce-a21c-91441ef71f50.jpg][]][HTML5_2D_]

## [在线演示][Link 5]    ##

超金属的背景，仿佛探照灯的经过让他看上去更加的立体。这是一款使用HTML5 Canvas生成的2D光源效果。绝对让你不后悔使用它！

## [HTML5的Flappy bird实现 ][HTML5_Flappy bird_]    ##

[![5d24c3c5-c2e6-41b7-b488-ce150475236b.jpg][]][HTML5_Flappy bird_]

## [在线演示][HTML5_Flappy bird_]    ##

著名的Flappy Bird，相信知道的人一定不少吧，点击你的空格，不要让它掉下来，看看你最终的成绩有多好。发上来我们切磋一下吧.

## [Sonic - 循环加载的利器 ][Sonic - _]    ##

[![86cff2dc-ebdd-4b66-b5b4-ebbdf90df338.jpg][]][Sonic - _]

## [在线演示1 ][1]    [ 在线演示2][_2]     [ 在线演示3][_3]    ##

Sonic是一个不到3k，非常小的JS类库，你可以用这个类库来创建自定义的加载动画。它的循环动画效果非常赞，比如你可以用它做一条不断追逐自己尾巴 的蛇，这样的动画。Sonic使用了[HTML5][]的canvas元素和其相关API。它基于在一定小的时间间隔上，基于预定义的路径，画出下一个形状，从而 完成动画效果。你可以使用arc，bezier，或line的方法来定义路径。

本周推荐的8款HTML5生成的特效，希望对大家有所帮助！欢迎加入极客标签，我们期待你的分享！

原文来自：[推荐8款HTML5相关的特殊效果 ][8_HTML5_]

[3d835206-f6b4-405d-a23b-82e47e944364.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/3d835206-f6b4-405d-a23b-82e47e944364.jpg
[3d835206-f6b4-405d-a23b-82e47e944364.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/3d835206-f6b4-405d-a23b-82e47e944364.jpg
[HTML5]: http://www.gbtags.com/gb/tag/1007.htm
[CSS]: http://www.gbtags.com/gb/tag/1002.htm
[JavaScript]: http://www.gbtags.com/gb/tag/1004.htm
[HTML5_]: http://www.gbtags.com/gb/share/2330.htm
[f9b5a1b1-156c-4c3b-9fe4-019c99d6fe24.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/f9b5a1b1-156c-4c3b-9fe4-019c99d6fe24.jpg
[Link 1]: http://www.gbtags.com/gb/demoviewer/2330/empty/9f2c38be-edf6-45c4-bc9c-502bf4935f76.html.htm
[-Frame player]: http://www.gbtags.com/gb/share/2219.htm
[896febb2-ad92-427e-8dac-a901d0a851c9.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/896febb2-ad92-427e-8dac-a901d0a851c9.jpg
[Link 2]: http://www.gbtags.com/gb/demoviewer/2219/9744b141-00d1-45a2-ac4e-0b65e29c89a1/frame-player-master%7Cindex.html.htm
[3D_]: http://www.gbtags.com/gb/share/2479.htm
[a6efbfc5-cb0c-4668-ab96-c8c243e7ab0e.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/a6efbfc5-cb0c-4668-ab96-c8c243e7ab0e.jpg
[Link 3]: http://www.gbtags.com/gb/demoviewer/2479/148dc76b-4978-4fae-9d7e-ccc6e47c6c3c/index.html.htm
[HTML5_ 1]: http://www.gbtags.com/gb/share/3011.htm
[60e6656d-ef39-4a58-b8b9-9cbde6b6e558.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/60e6656d-ef39-4a58-b8b9-9cbde6b6e558.jpg
[Link 4]: http://www.gbtags.com/gb/demoviewer/3011/empty/bedd6b78-ccdd-4254-b96b-60468879dd69.html.htm
[HTML5 Canvas_ _]: http://www.gbtags.com/gb/share/2928.htm
[e29e4ebe-7a13-486a-9435-44b607205ec3.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/e29e4ebe-7a13-486a-9435-44b607205ec3.jpg
[HTML Canvas]: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html
[HTML5_2D_]: http://www.gbtags.com/gb/share/2936.htm
[490a7f00-90b8-44ce-a21c-91441ef71f50.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/490a7f00-90b8-44ce-a21c-91441ef71f50.jpg
[Link 5]: http://www.gbtags.com/gb/demoviewer/2936/401315fa-afa9-412d-b6df-de501c117fd9/template1.html.htm
[HTML5_Flappy bird_]: http://www.gbtags.com/gb/share/2864.htm
[5d24c3c5-c2e6-41b7-b488-ce150475236b.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/5d24c3c5-c2e6-41b7-b488-ce150475236b.jpg
[Sonic - _]: http://www.gbtags.com/gb/share/2372.htm
[86cff2dc-ebdd-4b66-b5b4-ebbdf90df338.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/86cff2dc-ebdd-4b66-b5b4-ebbdf90df338.jpg
[1]: http://www.gbtags.com/gb/demoviewer/2372/53feadee-b9c1-4856-a162-1fb9985d0a6d/demo%7Ccircle.html.htm
[_2]: http://www.gbtags.com/gb/demoviewer/2372/53feadee-b9c1-4856-a162-1fb9985d0a6d/demo%7Cdemo.html.htm
[_3]: http://www.gbtags.com/gb/demoviewer/2372/53feadee-b9c1-4856-a162-1fb9985d0a6d/demo%7Crainbow.html.htm
[8_HTML5_]: http://www.gbtags.com/gb/share/3023.htm