48个残酷的HTML5 / CSS3演示

canvas卡通动画HTML5展示:48个潜在的Flash Killing演示

我以这篇文章来回答您最近在文章评论中提出的一个问题:

什么时候是开始使用HTML5进行全面设计的好时机?

好吧,说实话,这取决于您要定位的目标。 如果您不打算让访问者使用Internet Explorer(例如Mac软件页面),则立即开始使用HTML5,但是如果您需要IE浏览器的人来查看您的网站,则最好等待...

在入门上,跳了48个HTML5演示很不错,值得一看。 大就是小。

来源| 香港

audioburst动画

使用HTML5的canvas和audio标签创建的舒适而梦幻的动画。

audioburst动画HTML5展示:48个潜在的Flash Killing演示

球池

在最后的Google I / O事件中进行了展示,该演示向您展示了HTML5的动态性。

球池HTML5展示:48个潜在的Flash Killing演示

斑点沙拉

HTML5产生的生物会让您满意。

Blob sallad HTML5展示:48个潜在的Flash Killing演示

波莫莫

使用Bomomo,您可以观察到用HTML5模拟的不同原子运动。

bomomo HTML5展示:48个潜在的Flash Killing演示

浏览器球

对此“跨浏览器” HTML5球感到惊讶。

浏览器球HTML5展示:48个潜在的Flash Killing演示

气泡

通过创建不同颜色的无穷无尽的漂浮气泡来玩乐。

气泡HTML5展示:48个潜在的Flash杀死演示

帆布卡通动画

一个简单有趣的HTML5动画片,可以帮助您了解HTML5的canvas元素可以做什么。

canvas卡通动画HTML5展示:48个潜在的Flash Killing演示

酷时钟

一个由HTML5和JavaScript构建的漂亮,可定制的模拟时钟。

coolclock HTML5展示:48个潜在的Flash Killing演示

Flickr PS3幻灯片

在网络浏览器中以PS3样式幻灯片查看Flickr的照片。

flickr ps3幻灯片HTML5展示:48个潜在的Flash Killing演示

互动宝丽来

一个与多点触摸界面非常相似的交互式演示。

互动式拍立得HTML5展示:48个潜在的Flash Killing演示

JS烟花

由HTML5和Javascript驱动,以您喜欢的重力和速度享受烟花时刻。

js fireworks HTML5展示:48个潜在的Flash Killing演示

万花筒

一个非常美丽和未来派的HTML5万花筒。

万花筒HTML5展示:48个潜在的Flash Killing演示

液体颗粒

敏感的粒子动画会根据您的鼠标移动做出反应。

液体粒子HTML5展示:48个潜在的Flash杀死示例

催眠剂

另一个敏感而出色的HTML5演示,演示附近的元素如何与您的鼠标移动反应。

催眠器HTML5展示:48个潜在的Flash杀手演示

星云

迷失了这个奇妙的HTML5星云。

星云云HTML5展示:48个潜在的Flash杀死演示

视差

以平行透视图查看所有2D形状。

视差HTML5展示:48个潜在的Flash Killing演示

粒子动画

精美的HTML5粒子动画,可以形成您喜欢的消息。

粒子动画HTML5展示:48个潜在的Flash Killing演示

涂抹

迷失于这种无尽的传播动画中。

传播HTML5展示:48个潜在的Flash Killing演示

星空

一个非常酷的HTML5星空动画,可以根据您的鼠标移动来改变方向和速度。

starfield HTML5展示:48个潜在的Flash Killing演示

视频破坏

一键播放正在播放的视频。

视频销毁HTML5展示:48个潜在的Flash Killing演示

Waveform

注意HTML5的画布波如何通过改变其幅度,波长,宽度等来移动。

波形HTML5展示:48个潜在的Flash Killing演示

3D效果

画布动画给人留下了深刻的印象吗? HTML5的canvas元素可以做的更多,这就是3D效果。 开发人员可以依靠画布元素,DOM和JavaScript来创建3D效果,然后可以将其开发为3D动画或游戏。

Canvas3D和Flickr

使用Flickr的照片流拥有全新的3D体验。

canvas3d和flickr HTML5展示:48个潜在的Flash Killing演示

布模拟

基于HTML5的逼真的布料模拟。

布料模拟HTML5展示:48个潜在的Flash Killing演示

进化的怪物

观察一个演变成复杂生物的怪物,其创建者之一就是HTML5。

不断演变的怪物HTML5展示:48个潜在的Flash杀死演示

谷歌礼品盒

巨型搜索引擎Google以3D可播放视图呈现。

google giftbox HTML5展示:48个潜在的Flash Killing演示

JS触摸

高质量逼真的“ 3D on 2D Canvas”展示柜。

js touch HTML5展示:48个潜在的Flash Killing演示

数据展示

HTML5的canvas元素可用于创建动画和3D效果,但也可以实现以呈现数学数据。

诺普洛特

Gnuplot,HTML5版本的数据绘图应用程序。

gnuplot HTML5展示:48个潜在的Flash Killing演示

图形

RGraph提供了多种数据表示形式,例如条形图,进度条和传统雷达图。

rgraph HTML5展示:48个潜在的Flash Killing演示

Web应用程序

最终,利用HTML5和其他语言组合的所有可能性,可以创建交互式应用程序或与Flash应用程序接近的游戏。

画布画

见证Microsoft Paint的兄弟进入您的Web浏览器,他的父亲是HTML5。

canvaspaint HTML5展示:48个潜在的Flash Killing演示

画布摩尔

旨在帮助您了解某些地球元素的结构的科学应用程序。

canvasmol HTML5展示:48个潜在的Flash Killing演示

卡通生成器

使用此最小化的交互式卡通生成器绘制有趣的卡通图像。

卡通生成器HTML5展示:48个潜在的Flash Killing演示

在这里拖任何东西

拖动可以在演示中拖动的任何内容以显示详细信息。

将任何内容拖到此处HTML5展示:48个潜在的Flash Killing演示

加蒂奇素描

原始的HTML5应用程序,可让您制作一些基本图形,并可以将其保存为jpeg或png等不同的图像格式。

gartic草图HTML5展示:48个潜在的Flash Killing演示

物理素描

画任何您喜欢的东西,看看它们如何对模拟重力产生反应。

physicsketch HTML5展示:48个潜在的Flash Killing演示

画板

强大的HTML5绘图应用程序,使您能够以精确的方式绘制和编辑图像。

记事本HTML5展示:48个潜在的Flash终止演示

短暂聊天

一个Web应用程序,用于确认从Twitter获取的与天气有关的消息的地理位置,从而将其形成为基于画布的“社交天气”地图,这很琐碎(如作者所述),但很有趣。

smalltalk HTML5展示:48个潜在的Flash Killing演示

游戏

3无聊

如果您可以在下一秒内躲避成百上千个HTML5项目符号,您将永远不会感到无聊。

3无聊的HTML5展示:48个潜在的Flash Killing演示

爆发

反弹球,打破所有障碍。

突破性HTML5展示:48个潜在的Flash Killing演示

帆布景观

它不是一个游戏,但是它演示了如何使用HTML5开发“第一人称射击”浏览器游戏。

canvascape HTML5展示:48个潜在的Flash Killing演示

抓住它

您可以躲避多少球才能赢得HTML5方形方块?

抓住它HTML5展示:48个潜在的Flash Killing演示

连锁反应

连锁爆炸达到目标,不要上瘾。

连锁反应HTML5展示:48个潜在的Flash Killing演示

立方体

以自上而下的3D视角播放俄罗斯方块。

cubeout HTML5展示:48个潜在的Flash Killing演示

etcha物理

抽奖项目将球移动到星星,不要忘记重力。

etchaphysics HTML5展示:48个潜在的Flash Killing演示

拼图游戏

单击,旋转和放下拼图,即可解决此基于HTML5的拼图游戏。

拼图HTML5展示:48个潜在的Flash Killing演示

幻灯片拼图

滑向胜利,这是另一个HTML5游戏,旨在吸引您的注意力。

幻灯片拼图HTML5展示:48个潜在的Flash Killing演示

同一个游戏

删除某些组以使另一组以相同的颜色配对,您最终将获得胜利。

相同的游戏HTML5展示:48个潜在的Flash Killing演示

俄罗斯方块

HTML5是最经典的游戏之一。

tetris HTML5展示:48个潜在的Flash Killing演示

花托

另一个伪3D版本的俄罗斯方块游戏。

torus HTML5展示:48个潜在的Flash Killing演示


发表您的评论

您的电子邮件地址将不会被发表。 必填字段标有 *

*

*

  1. 负责数据:MiguelÁngelGatón
  2. 数据用途:控制垃圾邮件,注释管理。
  3. 合法性:您的同意
  4. 数据通讯:除非有法律义务,否则不会将数据传达给第三方。
  5. 数据存储:Occentus Networks(EU)托管的数据库
  6. 权利:您可以随时限制,恢复和删除您的信息。

  1.   丘帕蒂娜

    泰特里斯不去了,我把两片放进去,但支架却很酷

  2.   伊利莎

    我喜欢这个页面...除了第一个游戏。 我爱你弗兰=)
    再见一个吻世界

  3.   赫尔西奇

    令人难以置信,壮观。 我不敢相信Web开发已经走了多远!

  4.   乔·维加

    我不知道为什么这些资源归功于HTML5,这是纯Javascript,在Flash兴起之前,借助Javascript可以完成所有这些事情,巴塞罗那的一项研究使当时的某些网站震惊了我, javascript中的所有内容如此丰富,以至于我从它们中学到了东西,并设计了一对带有弹跳球的东西,我完全失去了它们,但仍然感到遗憾。 我不记得工作室的名字是在2年代左右的you2或2you98。

  5.   自卫队

    乔·维加(Joe Vega)......它表明您对HTML5毫无了解... .lol

  6.   乔·维加

    您可能没有任何血腥的html5想法,这是真的,但是您将公鸡与鸡舍混淆了,并且不要将语言与环境区分开。 我要求您在不使用Javascript的情况下仅使用html5来制作一个类似于此处的示例,您将了解我在删除的帖子中的意思。 更重要的是,我一直在查看示例的源代码,其中有几个可以轻松完成而无需将其安装在html5上。
    该html5带来了许多改进,并且确实带来了很多便利,但是此页面上显示的奇妙事物的桂冠是Javascript。

  7.   圣地亚哥·巴切塔

    我有兴趣进行此类演示...您是否有包含资源的教程或页面? 谢谢!!!