阅读更多

14顶
0踩

Web前端

原创新闻 精选9个值得学习的 HTML5 效果【附源码】

2014-11-06 11:09 by 见习记者 webgeeker 评论(6) 有11329人浏览

  这里精选了一组很酷的 HTML5 效果。HTML5 是现 Web 开发领域的热点, 拥有很多让人期待已久的新特性,特别是在移动端,Web 开发人员可以借助 HTML5 强大功能轻松制作各种交互性强、效果丰富的Web 应用。

超炫 HTML5 粒子效果进度条

  我喜欢粒子效果作品,特别是那些能够应用于实际的,例如这个由 Jack Rugile 基于 HTML5 Cavnas 编写的进度条效果。看着这么炫的 Loading 效果,即使让我多等一会也无妨:)

 

源码下载    /  在线演示

 

HTML5 Canvas 模拟可撕裂布料效果

  这是一个模拟可撕裂布料效果的 HTML5 Canvas 应用演示,效果逼真。你会看到,借助 Canvas 的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神的效果。

 

源码下载    /  在线演示

 

SVG 实现一个漂亮的页面预加载效果

  展示如何使用 CSS 动画, SVG 和 JavaScript 创建一个简单的页面预加载效果。对于网站来说,这些预载入得画面提供了一种创造性的方法,使用户在等待内容加载的时候不会那么无聊。

 

源码下载    /  在线演示

 

结合 CSS3 & Canvas 模拟人行走的效果

  HTML5 和 CSS3 技术给 Web 带来了新的利器,点燃了 Web 开发人员的激情。所谓只有想不到,没有做不到,的确如此。下面给大家分享一个结合 CSS3 & Canvas 模拟人行走的动画效果。

 

源码下载   /   在线演示

 

HTML5 高仿逼真 3D 布料图案效果

  HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大。下面给大家分享一个 HTML5 Canvas 绘制的 3D 布料图案效果。

 

源码下载    /  在线演示

 

HTML5 模拟现实物理效果

  Ball Pool 是一个基于 HTML5 技术的实验,模拟现实物理效果,让你在 Web 中感受自然物体的运动。玩法介绍:可以随意拖动圆球、点击页面背景、晃动浏览器、双击页面背景或者按住鼠标左键,有不同的效果,赶紧来体验一下。

 

 

源码下载   /  在线演示

 

HTML5 WebGL 实现逼真的云朵效果

  使用 HTML5 WebGL 实现超逼真的云朵效果。WebGL 是一项在网页浏览器呈现3D画面的技术,有别于过去需要安装浏览器插件,通过 WebGL 的技术,只需要编写网页代码即可实现3D图像的展示。

 

源码下载   /   在线演示

HTML5 制作疯狂的触手 

   这个示例叫疯狂的触手,移动鼠标可以进行涂鸦,点击鼠标可以清除画布。

 

源码下载   /   在线演示

 

WebGL 实现的水面特效实验

  使用 WebGL 实现的水面特效实验,可放入一张照片,使用鼠标触动水面会有奇特效果。

 

源码下载    /  在线演示

 

来自: 梦想天空
14
0
评论 共 6 条 请登录后发表评论
6 楼 关中大虾 2014-11-12 13:10
mark!!!
5 楼 zhang1685701 2014-11-11 21:56
mark.
4 楼 lin_zy 2014-11-11 15:56
html5杠杠的
3 楼 向日葵上的小蜜蜂 2014-11-10 10:00
2 楼 小林信仁 2014-11-09 00:59
非常不错,收藏啦!
1 楼 alexkaleo 2014-11-07 17:18
  不错。

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 最新 html5-demo报表值得学习

    最新 html5-demo报表值得学习最新 html5-demo报表值得学习最新 html5-demo报表值得学习最新 html5-demo报表值得学习最新 html5-demo报表值得学习最新 html5-demo报表值得学习最新 html5-demo报表值得学习最新 ...

  • html5效果源码,10款web前端值得学习的 HTML5 效果附源码

    1.jQuery右侧Tab选项卡的焦点图插件这是一款基于jQuery的焦点图插件,和之前介绍的jQuery焦点图插件类似,它...2.超炫 HTML5 粒子效果进度条我喜欢粒子效果作品,特别是那些能够应用于实际的,例如这个由 Jack Rugil...

  • 80个HTML5小游戏源码

    八十个HTML5小游戏源码,仿照微信上的小游戏做的,很值得借鉴练习。 解压密码在压缩包右侧。

  • 一个完整的HTML5网页游戏源码:蘑菇与熊.rar

    一个完整的HTML5网页游戏源码:蘑菇与熊游戏代码,界面做的相当专业,画质不错,游戏流畅度也是相当牛的,在支持HTML5的浏览器下都可以运行,游戏界面效果如截图所示,具体玩法我也没研究,只顾着研究HTML5的技术...

  • HTML5网页版街头霸王游戏源码分享.rar

    HTML5网页版街头霸王游戏源码分享,这个值得推荐啊,看到画面就会勾起你的回忆了,儿时的时候,能玩到这种游戏是梦想埃这次是使用了大量的HTML5、css3技术而实现的网页版街头霸王,下面来说一下游戏控制: ...

  • HTML5 SVG 两个小狗动画 仿Flash效果.rar

    HTML5 SVG 技术绘制两个小狗动画 ,动画效果仿Flash,小狗尾巴会摇摆,头扭来扭去,而且...另一个是一只黑白相间的小狗,同样有着十分平滑的动画效果,你可体验一下强大的HTML5 svg动画生成功能,十分值得大家学习。

  • HTML5全屏翻页源码.rar

    HTML5全屏翻页源码,请使用主流浏览器看动态HTML5效果非常棒哦~  网路技术学习与网赚经验培训等……  网站搭建与制作学习,软件编写与运用,PS技巧与经验等……  网站站长必备HTML5引导页值得拥有……

  • 2020年值得收藏与学习280多款H5小游戏,从入门到彻底了解它(附源码)

    作者曾经一度的迷恋H5小游戏(`好玩、收集、模仿、学习`),是从2014年流行开始,到2015年朋友圈爆火。那时经常看到朋友圈好友转发分享H5小游戏,有时候自己也会点进去玩一下,简单的游戏情节设计以及操作方式让我们...

  • HTML5网络版中国象棋游戏源码.rar

    HTML5网络版中国象棋游戏源码,网站上直接进行对弈的网络象棋,象棋的界面值得称赞哦!十分美观又专业,而且又很仿真。走棋逻辑也是写的很棒,不失为一款很好玩的网页游戏。

  • html5优分期大学生分期购物商城模板源码.zip

    html5优分期大学生分期购物商城模板源码,可以模拟学习,用于提升前端有好处,值得拥有,想要更多其他软件开发资料源码可以联系

  • 带动画仿Flash的HTML5 大事记特效-源码下载.rar

    这是一款带动画效果仿Flash风格的HTML5 大事记特效-源码下载,大事记的每一个重大事件都以动画效果呈现,而且网页背景同样是动态的,CSS3强大的动画功能值得称赞。具备以下亮点功能:  1、页面加载完成后,时间轴会...

  • 超级玛丽htm5源码(使用html和javescript实现)

    超级玛丽htm5源码,使用html和javescript实现,游戏非常完整,非常值得学习的源码

  • HTML5游戏《大盗鲍勃》源码

    游戏截图: ... HTML5游戏《大盗鲍勃》源码 非常棒的一款益智解谜游戏,玩家通过扮演一名天赋极佳的大盗,发掘一个又一个的秘密。 不论从声效,玩法,或者是剧情,都非常值得推荐。

  • html5模仿微信打飞机游戏源码

    html5模仿微信打飞机游戏源码,值得下载

  • HTML5模拟有弹性的蜘蛛网蜘蛛爬行效果.rar

    与大家分享一款HTML5模拟有弹性的蜘蛛网蜘蛛爬行效果,看似简单的效果,但调用了比较多的JS封装库,不过实现的效果确实够逼真,蜘蛛就像活的一样,在有弹性的蜘蛛网上爬行,绝对值得一看的HTML5特效。

  • HTML5+Canvas实现的超炫粒子效果文字动画特效源码

    这是一款基于HTML5 Canvas实现的文字特效源码,在页面下方的输入框中输入想要展示的文字,回车后即可在canvas上绘制出粒子效果的文字动画,动画效果炫酷十足,是值得收藏的html5经典特效。

  • HTML5模拟风吹衣服不停摆动的动画效果.rar

    HTML5模拟风吹衣服不停摆动的动画效果,运行效果后,可拖动鼠标改变场景视图,然后鼠标在衣服上拖动,即可看到衣服像是被风吹的效果一样,不停的摆动,里面的算法我觉得更值得学习,因此将源码分享给大家,相当不错...

  • 1基于蓝牙的项目开发--蓝牙温度监测器.docx

    1基于蓝牙的项目开发--蓝牙温度监测器.docx

  • AppDynamics:性能瓶颈识别与优化.docx

    AppDynamics:性能瓶颈识别与优化

Global site tag (gtag.js) - Google Analytics