20个HTML5/CSS3超酷应用

r囧r小猫 2022-08-06 03:18 208阅读 0赞

http://www.gbtags.com/gb/share/2818.htm?utm\_source=tuicool

# 20个HTML5/CSS3超酷应用 #

*  ![80x805e8484aa-8751-4021-a08b-5a9c7a23c5af.JPG][]
    
    [\#文章][Link 1]
 *  ![30x305e8484aa-8751-4021-a08b-5a9c7a23c5af.JPG][]
    
    [CSS3][]
 *  ![30x305e8484aa-8751-4021-a08b-5a9c7a23c5af.JPG][]
    
    [HTML5][]
 *  ![30x305e8484aa-8751-4021-a08b-5a9c7a23c5af.JPG][]
    
    [jQuery][]

[申请达人][Link 2]，去除赞助商链接

1、[HTML5视频破碎重组特效 强大视觉冲击][HTML5_]

HTML5视频播放器很多，但是HTML5视频特效还是很少见的，这款HTML5视频破碎重组特效非常刺激，给人强大的视觉冲击。点击视频任意地方，HTML5将会将这些区域击碎，过一段时间，这些被击碎的视频碎片又将自动重新组合。是一款非常不错的HTML5视频特效。

[![html5-video-crash][]][html5-video-crash 1]

[在线演示][html5-video-crash 1]    /    [源码下载][Link 3]

2、[HTML5 3D Google搜索 小盒子 大世界][HTML5 3D Google_ _]

HTML5真是能让人想象万千，居然动起了Google搜索的主意，它利用HTML5技术将Google搜索放到了一个小盒子里，弄起了3D搜索。随着鼠标移动，HTML5 3D搜索盒子也就转动，非常立体。点击搜索按钮，即可打开盒子进行Google搜索。

[![html5-3d-google-search][]][html5-3d-google-search 1]

[在线演示][html5-3d-google-search 1]    /    [源码下载][Link 4]

3、[CSS3/jQuery创意盒子动画菜单][CSS3_jQuery]

作为前端开发者，各种各样的jQuery菜单见过不少，这款jQuery/CSS3菜单却是别具一格，菜单项嵌入到九宫格中，像小盒子一样，加上温馨的背景，菜单整体外观十分可爱。点击菜单项，盒子就会展开，展示该菜单项具体的内容。该CSS3菜单在展开时也有不错的动画效果。

[![jquery-css3-box-menu][]][jquery-css3-box-menu 1]

[在线演示][jquery-css3-box-menu 1]    /    [源码下载][Link 5]

4、[华丽的HTML5图表 可展示实时数据][HTML5_ 1]

HTML5在图表应用中也十分广泛，比起以前的网页图表，HTML5图表制作更便捷，功能更强大。这款HTML5图表插件外观十分华丽和专业，在数据展示方面也很有优势，图表不仅支持多维数据展示，而且支持区域选择数据功能，利用该HTML5图表可以更加方便地管理你的数据。

[![html5-chart-data][]][html5-chart-data 1]

[在线演示][html5-chart-data 1]    /    [源码下载][Link 6]

5、[HTML5重力感应游戏 甩甩领导的头像][HTML5_ 2]

快过年了，工资没涨多少吧，年终奖没发吧，恨领导吧。现在利用这款HTML5重力感应游戏来尽情甩领导的头像吧。制作一些你憎恨的领导们的头像图片，利用该HTML5重力感应游戏插件来拖动鼠标甩动这些头像，叫你不加工资…叫你不加工资…

[![html5-zlgy][]][html5-zlgy 1]

[在线演示][html5-zlgy 1]    /    [源码下载][Link 7]

6、[HTML5 3D立体图片旋转播放展示][HTML5 3D]

自从HTML5技术的出现，我们可以在浏览器上看到越来越多的3D特效。这款HTML5 3D立体图片旋转播放展示工具就体现了强大的HTML5 3D功能。当然这需要支持HTML5 3D功能的浏览器才能观看这个3D图片演示。

[![html5-3d-image-player][]][html5-3d-image-player 1]

[在线演示][html5-3d-image-player 1]    /    [源码下载][Link 8]

7、[HTML5中国象棋游戏 自定义象棋难度][HTML5_ 3]

棋类游戏在桌面游戏中已经非常成熟，中国象棋的版本也非常多。今天这款基于HTML5技术的中国象棋游戏非常有特色，我们不仅可以选择中国象棋的游戏难度，而且可以切换棋盘的样式。程序写累了，喝上一杯咖啡，和电脑对弈几把吧，相信这HTML5中国象棋游戏的实现算法你比较清楚，可以打开源码来研究一下这款HTML5中国象棋游戏。

[![html5-zgxq][]][html5-zgxq 1]

[在线演示][html5-zgxq 1]    /    [源码下载][Link 9]

8、[HTML5播放器神话 卡带式古典播放器][HTML5_ 4]

这是一款样式非常古典，但又是非常时尚的HTML5播放器，说它是古典播放器，是因为这种卡带式的HTML5播放器比较古老，说它时尚，是因为现在的HTML5播放器很少有这种样式的，非常有创意。如果你想给你的个人主要添加一款个性化的播放器，那么这款HTML5卡带式古典播放器可以选择一下，个人认为这是HTML5播放器的神话，非常经典。

[![html5-cassette-player][]][html5-cassette-player 1]

[在线演示][html5-cassette-player 1]    /    [源码下载][Link 10]

9、[HTML5超级玛丽游戏重体验 HTML5游戏经典][HTML5_ HTML5]

还记得小时候一起玩过的超级玛丽冒险游戏吗？是的，那是我们小时候很火的一款游戏，今天老外利用HTML5技术让超级玛丽可以在网页上跑了，HTML5版的超级玛丽虽然没有原版的功能强大，但是如果你有兴趣，完全可以把它写完善了。HTML5真的很强大，HTML5游戏方面更是犀利。

[![html5-mario][]][html5-mario 1]

[在线演示][html5-mario 1]    /    [源码下载][Link 11]

10、[浪漫程序员 HTML5爱心表白动画][HTML5 1]

我们程序员在追求爱情方面也是非常浪漫的，下面是一位同学利用自己所学的HTML5知识自制的HTML5爱心表白动画，画面非常温馨甜蜜，这样的创意很容易打动女孩，如果你是单身的程序员，也赶紧来制作自己的爱心表白动画吧。

[![html5-heart][]][html5-heart 1]

[在线演示][html5-heart 1]    /    [源码下载][Link 12]

11、[CSS3密码强度验证表单 码速表样式][CSS3_]

我们在网站上注册会员时，输入一个强大较大的密码会大大增加帐号安全性，那么什么样的密码才比较安全呢？这款CSS3密码强度验证表单插件可以提示你当前输入密码的安全级别，有意思的是该密码强度验证插件的样式酷似码速表，随着密码强度的加大，码速表指针就会顺时针旋转，当然旋转的特效是利用CSS3结合jQuery实现的。

[![css3-password-strong-form][]][css3-password-strong-form 1]

[在线演示][css3-password-strong-form 1]    /    [源码下载][Link 13]

12、[纯CSS3 Android Logo动画绘制 小手还会动][CSS3 Android Logo_]

利用CSS3可以绘制很多复杂的图案图标，今天就利用纯CSS3实现Android Logo图标，该CSS3 Android Logo主要利用了CSS3中的圆角等属性，绘制出来的Logo非常逼真，同时该Android Logo还有动画效果，鼠标滑过Android小人的头和手时，小手还能够挥动。

[![css3-android-logo][]][css3-android-logo 1]

[在线演示][css3-android-logo 1]    /    [源码下载][Link 14]

13、[纯CSS3发光登录表单][CSS3 1]

我们见过很多CSS3表单，制作都非常精美，今天介绍的这款CSS3表单不但外观华丽，而且伴有颜色发光动画。当鼠标激活表单时，表单周围就会出现颜色渐变的发光动画，配合黑色的背景，整个CSS3表单显得格外亮丽。更重要的是，这个CSS3发光表单基本用CSS3实现，很少的JS代码，在CSS3引擎上优化非常明显。

[![css3-golden-shine-login-form][]][css3-golden-shine-login-form 1]

[在线演示][css3-golden-shine-login-form 1]    /    [源码下载][Link 15]

14、[CSS3 3D进度条按钮 18款精美样式][CSS3 3D_ 18]

我们在网页上提交数据的时候经常会看到进度条，不过大部分进度条都是在网页其他地方显示，比如弹出一个窗口。这款CSS3实现的进度条是显示在按钮上的，可以更直观的体现出用户提交的进度情况，该CSS3进度条按钮样式非常漂亮，在支持3D的浏览器上还能有3D立体的效果，而且进度条展现形式很多，一共18种样式。

[![css3-3d-process-button][]][css3-3d-process-button 1]

[在线演示][css3-3d-process-button 1]    /    [源码下载][Link 16]

15、[HTML5水波荡漾动画特效 非常逼真][HTML5_ 5]

在现实生活中，我们经常可以看到水波的效果，雨滴落到小河中，河里必定泛起了水波。今天我们用HTML5模拟了水波荡漾效果，点击河水的图片，即可从点击处开始泛起水波，并向远处伸展。这个利用HTML5模拟出来的水波效果非常逼真，不过有点耗CPU。

[![html5-water-ripple][]][html5-water-ripple 1]

[在线演示][html5-water-ripple 1]    /    [源码下载][Link 17]

16、[HTML5雨点下落动画 让雨点飞起来][HTML5_ 6]

利用HTML5实现雨点下落需要注意一下几点：1、雨点的大小和形状；2、雨点下落的速度控制，注意应该是加速下落。这个演示动画就很生动的模拟了雨点下落动画。当鼠标移上去时，就会形成3个雨点并向下掉落。HTML5技术真的非常方便。

[![html5-rain-drop][]][html5-rain-drop 1]

[在线演示][html5-rain-drop 1]    /    [源码下载][Link 18]

17、[HTML5吃豆人游戏PCMAN][HTML5_PCMAN]

今天又要介绍一款不错的HTML5游戏，HTML5吃豆人游戏，画面上有一个吃豆人和一群怪物，你需要控制吃豆人移动吃掉路上的小豆子，一旦吃豆人遇到怪物被吃掉的时候，你就GAME OVER了。这款HTML5游戏还有一点没完善，就是吃豆人碰到怪物的时候不能被怪物吃掉，有兴趣的同学可以继续把它完善。HTML5游戏开发不仅需要技术，也需要创意。

[![html5-pcman][]][html5-pcman 1]

[在线演示][html5-pcman 1]    /    [源码下载][Link 19]

18、[HTML5像素粉碎图片动画 图片洒落一地][HTML5_ 7]

这款HTML5图片动画特效你绝对想不到，它将一张图片粉碎成许多像素颗粒，点击图片后，这些像素颗粒边掉落在地上，继续点击，粉碎的像素图片颗粒又会重新组合成完整的图片。用HTML5技术实现这种图片粉碎效果还是挺简单的，有兴趣的同学可以下载源码来学习。

[![html5-pixel-image-effect][]][html5-pixel-image-effect 1]

[在线演示][html5-pixel-image-effect 1]    /    [源码下载][Link 20]

19、[HTML5太空战机游戏 有声有色][HTML5_ 8]

这又是一款制作精良的HTML5游戏，该HTML5游戏的主角是一架英勇威武的太空战机，进入游戏后按”Z”键发射子弹，消灭敌机。该HTML5战机游戏的特点是：1、游戏画面非常华丽逼真，并且加入声音元素，让游戏更加迷人；2、游戏元素很多，敌机类型和发射子弹类型也很多，让玩家不会枯燥。

[![html5-airplan-game][]][html5-airplan-game 1]

[在线演示][html5-airplan-game 1]    /    [源码下载][Link 21]

20、[HTML5动画图片播放器 高端大气][HTML5_ 9]

我们见过很多图片播放插件（焦点图），很多都基于jQuery。今天介绍的HTML5图片播放器很特别，它不仅在图片间切换有过渡动画效果，而且在切换时图片中的元素也将出现动画效果，比如图中的文字移动、打散、重新组合等。这款HTML5动画图片播放器算得上是高端大气上档次。

[![html5-image-player-with-animation][]][html5-image-player-with-animation 1]

[在线演示][html5-image-player-with-animation 1]    /    [源码下载][Link 22]

[80x805e8484aa-8751-4021-a08b-5a9c7a23c5af.JPG]: http://www.gbtags.com/gb/networks/avatars/80x805e8484aa-8751-4021-a08b-5a9c7a23c5af.JPG
[Link 1]: http://www.gbtags.com/gb/tag/usertag/39458.htm
[30x305e8484aa-8751-4021-a08b-5a9c7a23c5af.JPG]: http://www.gbtags.com/gb/networks/avatars/30x305e8484aa-8751-4021-a08b-5a9c7a23c5af.JPG
[CSS3]: http://www.gbtags.com/gb/tag/usertag/39454.htm
[HTML5]: http://www.gbtags.com/gb/tag/usertag/39455.htm
[jQuery]: http://www.gbtags.com/gb/tag/usertag/39456.htm
[Link 2]: http://www.gbtags.com/gb/applydaren.htm
[HTML5_]: http://www.html5tricks.com/html5-video-crash.html
[html5-video-crash]: /images/20220806/8eb8ad154a914fb7bf695ae214c6e5ac.png
[html5-video-crash 1]: http://www.html5tricks.com/demo/html5-canvas-video/index.html
[Link 3]: http://www.html5tricks.com/download/html5-canvas-video.rar
[HTML5 3D Google_ _]: http://www.html5tricks.com/html5-3d-google-search.html
[html5-3d-google-search]: /images/20220806/39c801a12dc744a48a82e3da99f976eb.png
[html5-3d-google-search 1]: http://www.html5tricks.com/demo/html5-3d-google-search/index.html
[Link 4]: http://www.html5tricks.com/download/html5-3d-google-search.rar
[CSS3_jQuery]: http://www.html5tricks.com/css3-jquery-box-menu.html
[jquery-css3-box-menu]: /images/20220806/98ce82c239cd4b249d06478f03fc086d.png
[jquery-css3-box-menu 1]: http://www.html5tricks.com/demo/LittleBoxesMenu/index.html
[Link 5]: http://zjdx1.sc.chinaz.com/Files/DownLoad/webjs/LittleBoxesMenu.zip
[HTML5_ 1]: http://www.html5tricks.com/html5-chart-data.html
[html5-chart-data]: /images/20220806/edd1c1dafa76414f81728b30d3c3e78f.png
[html5-chart-data 1]: http://www.html5tricks.com/demo/jiaoben1108/index.html
[Link 6]: http://zjdx1.sc.chinaz.com/Files/DownLoad/webjs1/201306/jiaoben1108.rar
[HTML5_ 2]: http://www.html5tricks.com/html5-zlgy.html
[html5-zlgy]: /images/20220806/a145c57141bf4d5d98ca667ef43847ef.png
[html5-zlgy 1]: http://www.html5tricks.com/demo/jiaoben1144/index.html
[Link 7]: http://zjdx1.sc.chinaz.com/Files/DownLoad/webjs1/201307/jiaoben1144.rar
[HTML5 3D]: http://www.html5tricks.com/html5-3d-image-player.html
[html5-3d-image-player]: /images/20220806/94c57998c28d493baa2166e36332deb2.png
[html5-3d-image-player 1]: http://www.html5tricks.com/demo/jiaoben1467/index.html
[Link 8]: http://zjdx1.sc.chinaz.com/Files/DownLoad/webjs1/201309/jiaoben1467.rar
[HTML5_ 3]: http://www.html5tricks.com/html5-zgxq.html
[html5-zgxq]: /images/20220806/b6082759e5c444c19c90cc0a6bc91f89.png
[html5-zgxq 1]: http://www.html5tricks.com/demo/jiaoben1765/index.html
[Link 9]: http://fjdx1.sc.chinaz.com/Files/DownLoad/webjs1/201312/jiaoben1765.rar
[HTML5_ 4]: http://www.html5tricks.com/html5-cassette-player.html
[html5-cassette-player]: /images/20220806/fedda33f9ea54936b35da3eb66279498.png
[html5-cassette-player 1]: http://www.html5tricks.com/demo/CassettePlayer/index.html
[Link 10]: http://demo.itivy.com/download/CassettePlayer.rar
[HTML5_ HTML5]: http://www.html5tricks.com/html5-mario.html
[html5-mario]: /images/20220806/92e19f86b5454555b125494e90f01de5.png
[html5-mario 1]: http://www.html5tricks.com/demo/html5-mario/index.html
[Link 11]: http://js.itivy.com/download/html5-mario.rar
[HTML5 1]: http://www.html5tricks.com/html5-heart-animation.html
[html5-heart]: /images/20220806/bf081159ebb342a9bee19a66b24774af.png
[html5-heart 1]: http://www.html5tricks.com/demo/jiaoben1892/index.html
[Link 12]: http://zjdx1.sc.chinaz.com/Files/DownLoad/webjs1/201401/jiaoben1892.rar
[CSS3_]: http://www.html5tricks.com/css3-password-strong-form.html
[css3-password-strong-form]: /images/20220806/5c0dbd84c3db4b0e9816553ee08a007d.png
[css3-password-strong-form 1]: http://www.html5tricks.com/demo/jiaoben48/index.html
[Link 13]: http://zjdx1.sc.chinaz.com/Files/DownLoad/webjs/jiaoben48.rar
[CSS3 Android Logo_]: http://www.html5tricks.com/css3-android-logo.html
[css3-android-logo]: /images/20220806/ba182eb51b4f4717a21f28a390879df9.png
[css3-android-logo 1]: http://www.html5tricks.com/demo/jiaoben948/index.html
[Link 14]: http://zjdx1.sc.chinaz.com/Files/DownLoad/webjs1/201305/jiaoben948.rar
[CSS3 1]: http://www.html5tricks.com/css3-golden-shine-login-form.html
[css3-golden-shine-login-form]: /images/20220806/4e6ac9ba767b43819057989a99e834bd.png
[css3-golden-shine-login-form 1]: http://www.html5tricks.com/demo/Glowform/demo.html
[Link 15]: http://www.gbtags.com/gb/share/2818.htm?utm_source=tuicool#github.com/kaylarose/Glowform/archive/master.zip
[CSS3 3D_ 18]: http://www.html5tricks.com/css3-3d-process-button.html
[css3-3d-process-button]: /images/20220806/132053a774e84751a1437574b98e5500.png
[css3-3d-process-button 1]: http://www.html5tricks.com/demo/jiaoben1798/index.html
[Link 16]: http://zjdx1.sc.chinaz.com/Files/DownLoad/webjs1/201312/jiaoben1798.rar
[HTML5_ 5]: http://www.html5tricks.com/html5-water-ripple.html
[html5-water-ripple]: /images/20220806/4d799273eca44301bfd47a12ead071ec.png
[html5-water-ripple 1]: http://www.html5tricks.com/demo/html5-water-ripple/index.html
[Link 17]: http://www.html5tricks.com/download/html5-water-ripple.rar
[HTML5_ 6]: http://www.html5tricks.com/html5-rain-drop.html
[html5-rain-drop]: /images/20220806/4aee4dde08c74f7b8c5ea94248930026.png
[html5-rain-drop 1]: http://www.html5tricks.com/demo/html5-rain/index.html
[Link 18]: http://www.html5tricks.com/download/html5-rain.rar
[HTML5_PCMAN]: http://www.html5tricks.com/html5-game-pcman.html
[html5-pcman]: /images/20220806/4859c5e63ecf40e9bce9fc235c879bba.png
[html5-pcman 1]: http://www.html5tricks.com/demo/html5-pcman/index.html
[Link 19]: http://www.html5tricks.com/download/html5-pcman.rar
[HTML5_ 7]: http://www.html5tricks.com/html5-pixel-image-effect.html
[html5-pixel-image-effect]: /images/20220806/854b5234a2b947888f06758a40ba4c02.png
[html5-pixel-image-effect 1]: http://www.html5tricks.com/demo/html5-image-effect/index.html
[Link 20]: http://www.html5tricks.com/download/html5-image-effect.rar
[HTML5_ 8]: http://www.html5tricks.com/html5-airplan-game.html
[html5-airplan-game]: /images/20220806/144888e4df2241958ab8429ac0a3ebac.png
[html5-airplan-game 1]: http://www.html5tricks.com/demo/html5-fly/play.html
[Link 21]: http://www.html5tricks.com/download/html5-fly.rar
[HTML5_ 9]: http://www.html5tricks.com/html5-image-player-with-animation.html
[html5-image-player-with-animation]: /images/20220806/8762852c79804f29a9e2a34c067a7e49.png
[html5-image-player-with-animation 1]: http://www.html5tricks.com/demo/jiaoben6/index.html
[Link 22]: http://fjdx1.sc.chinaz.com/Files/DownLoad/webjs/jiaoben6.rar