阅读更多

28顶
0踩

Web前端

翻译新闻 10 个令人惊叹的 HTML5/JS 试验效果

2012-03-28 10:12 by 副主编 wangguo 评论(16) 有38783人浏览
本文收集了一些基于HTML5和JavaScript的试验性演示,充分展示了各种令人惊叹的互动效果。大部分效果可以在Chrome和Firefox中平稳运行,但是由于IE对HTML5支持尚不完全,效果可能不太理想。

1.  Canvas Sphere

Canvas Sphere呈现了球形三维点的旋转效果。该演示使用了z排序和alpha运动模糊来展示3D和旋转效果。



源码 / 演示

2.  Marbles

基于最新发布的A3 WebGL引擎的物理演示。呈现的是小球跳跃的效果。



源码 / 演示

3.  Noise Field

粒子流效果,通过鼠标移动来改变粒子运动方向。



源码 / 演示

4.  Fishbowl

这是微软开发的一个HTML5测试程序,以测试你的浏览器的表现能力。尝试一下,看看可以运行多少条鱼。



源码 / 演示

5.  Sticky Thing

一个粘块,可以使用鼠标来拖拽它。



源码 / 演示

6.  Breathing Galaxies

颜色和直径可以动态变化的圆内旋轮线。可以通过键盘来改变形状,或移动鼠标创建新的形状。



源码 / 演示

7.  Flower Power

使用花朵作为画笔的简单绘图工具。



源码 / 演示

8.  One Hour Per Second

该页面展示了在多少秒内共有多少小时的视频被上传到YouTube。



源码 / 演示

9.  Asteroid Belt

在照片上呈现HTML5动画效果。



源码 / 演示

10.  Graph Layout

一个交互式的力导向图形布局。



源码 / 演示

英文原文:10 Crazy HTML5 and JS Experiment Showcase
  • 大小: 64.7 KB
  • 大小: 44.9 KB
  • 大小: 69.1 KB
  • 大小: 54.9 KB
  • 大小: 50.6 KB
  • 大小: 78.3 KB
  • 大小: 100.9 KB
  • 大小: 98.7 KB
  • 大小: 63.7 KB
  • 大小: 53.6 KB
28
0
评论 共 16 条 请登录后发表评论
16 楼 tinglaa 2013-05-15 11:08
还牛了
15 楼 elvis4139 2012-04-10 19:10
机器跑卡了
14 楼 fancyleeo 2012-03-30 11:25
惊艳!  
13 楼 ghl116 2012-03-29 14:53
太耗资源了
12 楼 _9527 2012-03-29 10:39
效果真不错
11 楼 hanzhenggang 2012-03-29 10:35
呵呵,不错
10 楼 lingfa0511 2012-03-29 09:09
效果确实很震撼,不过cpu直线上升呀。。。
9 楼 田梦桦 2012-03-29 09:01
很帅气,很不错,就是不知道怎么看源码,看来HTML5和JavaScript功能很强的哦
8 楼 yihuijie2011 2012-03-29 08:42
效果果然不一般,想收藏。哈哈
7 楼 泡咖啡 2012-03-28 17:22
http://v-class.jp/nekomoji/   排字

http://sufa.cnodejs.net/create  书法
6 楼 hehongwei44 2012-03-28 17:21
非常好 就是不知道怎么看源码
5 楼 泡咖啡 2012-03-28 17:17
http://muro.deviantart.com/

补充一个
4 楼 tsoukw 2012-03-28 14:38
效果确实不错,CPU 100%
3 楼 奥义之舞 2012-03-28 14:20
哈哈,确实都很帅,不过最后一个!
刚开始我还以为打不开呢,最后才发现是需要Cross FireWall哦,被屏蔽了哈-_-!
2 楼 java-007 2012-03-28 13:25
我的小黑都热的不行了。太耗资源。
1 楼 shfzhzhr 2012-03-28 12:15
帅,非常NB啊

发表评论

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

相关推荐

  • 如何使用 Python 在终端中创建令人惊叹的图形

    它只做一种类型的绘图,但使用 Unicode 字符集绘制烛台图确实令人印象深刻。它不是 pip 可安装的,并且有一个同名的 pip 模块,所以要小心歧义,现在您只能通过将源克隆到您的项目中来使用它。 下面是一个从Windows...

  • Web 前瞻:九个不可思议的 HTML5 Canvas 应用试验

    HTML5<canvas> 元素给网页中的视觉展示带来了革命性的变化。Canvas 能够实现各种让人惊叹的视觉效果和高效的动画,在这以前是需要 Flash 支持或者 JavaScript 才能实...

  • Web 开发中应用 HTML5 技术的10个实例教程

    HTML5 作为下一代网站开发技术,无论你是一个Web开发人员或者想探索新的平台的游戏开发者,都值得去研究。借助尖端功能,技术和 API,HTML5允许你创建响应性、创新性、互动性以及令人惊...

  • 推荐10个适合初学者的 HTML5 入门教程

    HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究。借助尖端功能,技术和 API,HTML5 允许你创建响应性、创新性、互动性以及令人惊...

  • 惊艳!9个不可思议的 HTML5 Canvas 应用试验

    这个效果太惊异了,每个字母由不同的图像数据。我可以说的是这个动画绝对令人兴奋的,你看到文字效果取决于您的鼠标位置。 效果演示   7. Motion Graphic Typeface II 如果前一个演示还不够深刻,...

  • html5资源史无前例的 HTML5 资源参考指南

    http://www.html5china.com/course/20110919_1841.html 史无前例的 HTML5 资源参考指南 发布时间:2011-09-19 作者:admin 来源:未知 我要评论 尽管 HTML5 规范在 2014 年之前不会有正式版本,很多...

  • 史无前例的 HTML5 资源参考指南

    尽管 HTML5 规范在 2014 年之前不会有正式版本,很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能。HTML5 为 Web 设计和应用开发打开了一扇全新的门,原生支持了以前只可能使用 JavaScript 或 ...

  • HTML5新特性归纳和同类比较

    1 HTML5新特性简介 2 与Flash,APP的应用场景、发展趋势比较 3 简单推介几个HTML5游戏的资源

  • HTML5 canvas 效果

    HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大。今天这篇文章收集了20个惊艳的 HTML5 Canvas 应用试验推荐给大家。 01.

  • Html5教程和素材

    HTML5 教程(摘录自 W3C School) HTML 5 简介(HTML5 是下一代的 HTML) 什么是 HTML5? HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。HTML 的上一个版本诞生于 1999 年。自从那以后,Web 世界...

  • 史无前例的 HTML5 资源参考指南(转自:http://www.mangguo.org/the-ultimate-html5-resource-guide/)

    尽管 HTML5 规范在 2014 年之前不会有正式版本,很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能。HTML5 为 Web 设计和应用开发打开了一扇全新的门,原生支持了以前只可能使用 JavaScript 或 ...

  • 查看进程信息,方便排查问题

    查看进程信息,方便排查问题

  • IDA Pro分析STM32F1xx插件

    IDA Pro分析STM32F1xx插件

  • 基于SSH的线上医疗报销系统.zip-毕设&课设&实训&大作业&竞赛&项目

    项目工程资源经过严格测试运行并且功能上ok,可实现复现复刻,拿到资料包后可实现复现出一样的项目,本人系统开发经验充足(全栈全领域),有任何使用问题欢迎随时与我联系,我会抽时间努力为您解惑,提供帮助 【资源内容】:包含源码+工程文件+说明等。答辩评审平均分达到96分,放心下载使用!可实现复现;设计报告也可借鉴此项目;该资源内项目代码都经过测试运行,功能ok 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 【提供帮助】:有任何使用上的问题欢迎随时与我联系,抽时间努力解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 下载后请首先打开说明文件(如有);整理时不同项目所包含资源内容不同;项目工程可实现复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用

  • matlab的小型的微电网仿真模型文件

    小型的微电网仿真模型,简单模拟了光伏,家庭负载变化的使用情况

  • MATLAB代码实现:分布式电源接入对配电网运行影响深度分析与评估,MATLAB代码分析:分布式电源接入对配电网运行影响评估,MATLAB代码:分布式电源接入对配电网影响分析 关键词:分布式电源 配电

    MATLAB代码实现:分布式电源接入对配电网运行影响深度分析与评估,MATLAB代码分析:分布式电源接入对配电网运行影响评估,MATLAB代码:分布式电源接入对配电网影响分析 关键词:分布式电源 配电网 评估 参考文档:《自写文档,联系我看》参考选址定容模型部分; 仿真平台:MATLAB 主要内容:代码主要做的是分布式电源接入场景下对配电网运行影响的分析,其中,可以自己设置分布式电源接入配电网的位置,接入配电网的有功功率以及无功功率的大小,通过牛顿拉夫逊法求解分布式电源接入后的电网潮流,从而评价分布式电源接入前后的电压、线路潮流等参数是否发生变化,评估配电网的运行方式。 代码非常精品,是研究含分布式电源接入的电网潮流计算的必备程序 ,分布式电源; 配电网; 接入影响分析; 潮流计算; 牛顿拉夫逊法; 电压评估; 必备程序。,基于MATLAB的分布式电源对配电网影响评估系统

  • 基于Unity-Bolt开发的游戏demo.zip

    项目工程资源经过严格测试运行并且功能上ok,可实现复现复刻,拿到资料包后可实现复现出一样的项目,本人系统开发经验充足(全栈全领域),有任何使用问题欢迎随时与我联系,我会抽时间努力为您解惑,提供帮助 【资源内容】:包含源码+工程文件+说明等。答辩评审平均分达到96分,放心下载使用!可实现复现;设计报告也可借鉴此项目;该资源内项目代码都经过测试运行,功能ok 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 【提供帮助】:有任何使用上的问题欢迎随时与我联系,抽时间努力解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 下载后请首先打开说明文件(如有);整理时不同项目所包含资源内容不同;项目工程可实现复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用

  • 重庆市农村信用合作社 农商行数字银行系统建设方案.ppt

    重庆市农村信用合作社 农商行数字银行系统建设方案.ppt

  • 光伏并网逆变器设计方案与高效实现:结合matlab电路仿真、DSP代码及环流抑制策略,光伏并网逆变器设计方案:结合matlab电路文件与DSP程序代码,实现高效并联环流抑制策略,光伏并网逆变器设计方案

    光伏并网逆变器设计方案与高效实现:结合matlab电路仿真、DSP代码及环流抑制策略,光伏并网逆变器设计方案:结合matlab电路文件与DSP程序代码,实现高效并联环流抑制策略,光伏并网逆变器设计方案,附有相关的matlab电路文件,以及DSP的程序代码,方案、仿真文件、代码三者结合使用效果好,事半功倍。 备注:赠送逆变器并联环流matlab文件,基于矢量控制的环流抑制策略和下垂控制的环流抑制 ,光伏并网逆变器设计方案; MATLAB电路文件; DSP程序代码; 方案、仿真文件、代码结合使用; 并联环流抑制策略; 下垂控制的环流抑制,光伏并网逆变器优化设计:方案、仿真与DSP程序代码三合一,并赠送并联环流抑制策略Matlab文件

  • Matlab实现WOA-GRU鲸鱼算法优化门控循环单元的数据多输入分类预测(含模型描述及示例代码)

    内容概要:本文介绍了通过 Matlab 实现鲸鱼优化算法(WOA)与门控循环单元(GRU)结合的多输入分类预测模型。文章首先概述了时间序列预测的传统方法局限性以及引入 WOA 的优势。然后,重点阐述了项目背景、目标、挑战及其独特之处。通过详细介绍数据预处理、模型构建、训练和评估步骤,最终展示了模型的效果预测图及应用实例。特别强调利用 WOA 改善 GRU 的参数设置,提高了多输入时间序列预测的准确性与鲁棒性。 适合人群:对时间序列分析有兴趣的研究者,从事金融、能源、制造业等行业数据分析的专业人士,具备一定的机器学习基础知识和技术经验。 使用场景及目标:本项目旨在开发一个高度准确和稳定的多变量时间序列预测工具,能够用于金融市场预测、能源需求规划、生产调度优化等领域,为企业和个人提供科学决策依据。 其他说明:项目提供的源代码和详细的开发指南有助于学习者快速掌握相关技能,并可根据实际需求调整模型参数以适应不同的业务情境。

Global site tag (gtag.js) - Google Analytics