48個殘酷的HTML5 / CSS3演示

我以這篇文章來回答您最近在文章評論中提出的一個問題：

什麼時候是開始使用HTML5進行全面設計的好時機？

好吧，說實話，這取決於您要定位的目標。 如果您不打算讓訪問者使用Internet Explorer（例如：Mac軟件頁面），則立即開始使用HTML5，但是如果您需要IE瀏覽器的人來查看您的網站，則最好等待...

關於入口，在跳轉48個HTML5演示之後，這些演示令人驚嘆，值得一看。 偉大是小事。

來源| 香港

audioburst動畫

使用HTML5的canvas和audio標籤創建的舒適而夢幻的動畫。

球池

在最後的Google I / O事件中進行了展示，該演示向您展示了HTML5的動態性。

斑點沙拉

HTML5產生的生物會讓您滿意。

波莫莫

使用Bomomo，您可以觀察使用HTML5模擬的不同原子運動。

瀏覽器球

對此“跨瀏覽器” HTML5球感到驚訝。

氣泡

通過創建不同顏色的無窮無盡的漂浮氣泡來玩樂。

帆布卡通動畫

一個簡單有趣的HTML5動畫片，可以幫助您了解HTML5的canvas元素可以做什麼。

酷時鐘

一個由HTML5和JavaScript構建的漂亮，可定制的模擬時鐘。

Flickr PS3幻燈片

在網絡瀏覽器中以PS3樣式幻燈片查看Flickr的照片。

互動寶麗來

一個與​​多點觸摸界面非常相似的交互式演示。

JS煙花

由HTML5和Javascript驅動，以您喜歡的重力和速度享受煙花時刻。

萬花筒

一個非常美麗和未來的HTML5萬花筒。

液體顆粒

敏感的粒子動畫會根據您的鼠標移動做出反應。

催眠劑

另一個敏感而出色的HTML5演示，演示附近的元素如何隨著您的鼠標移動做出反應。

星雲

迷失了這個奇妙的HTML5星雲。

視差

以平行透視圖查看所有2D形狀。

粒子動畫

精美的HTML5粒子動畫，可以形成您喜歡的消息。

傳播

迷失於這種無盡的傳播動畫中。

星空

一個非常酷的HTML5星空動畫，可以根據您的鼠標移動來改變方向和速度。

視頻破壞

一鍵播放正在播放的視頻。

波形圖

注意HTML5的畫布波如何通過改變其幅度，波長，寬度等來移動。

3D效果

畫布動畫給人留下了深刻的印象嗎？ HTML5的canvas元素可以做的更多，這就是3D效果。 開發人員可以依靠畫布元素，DOM和JavaScript來創建3D效果，然後可以將其開發為3D動畫或遊戲。

Canvas3D和Flickr

使用Flickr的照片流擁有全新的3D體驗。

布模擬

基於HTML5的逼真的布料模擬。

進化的怪物

觀察一個演變成複雜生物的怪物，其創建者之一就是HTML5。

谷歌禮品盒

巨型搜索引擎Google以3D可播放視圖呈現。

JS觸摸

高質量逼真的“ 3D on 2D Canvas”展示櫃。

數據展示

HTML5的canvas元素可以用於創建動畫和3D效果，但也可以實現以呈現數學數據。

諾普洛特

Gnuplot，HTML5版本的數據繪圖應用程序。

圖形

RGraph提供了多種數據表示形式，例如條形圖，進度條和傳統雷達圖。

Web應用程序

最終，利用HTML5和其他語言組合的所有可能性，可以創建交互式應用程序或與Flash應用程序接近的遊戲。

畫布畫

見證Microsoft Paint的兄弟進入您的Web瀏覽器，他的父親是HTML5。

畫布摩爾

旨在幫助您了解某些地球元素的結構的科學應用程序。

卡通生成器

使用此最小化的交互式卡通生成器繪製有趣的卡通圖像。

在這裡拖任何東西

拖動您可以在演示中拖動的任何東西以顯示詳細信息。

加蒂奇素描

原始的HTML5應用程序，可讓您製作一些基本圖形，並可以將其保存為jpeg或png等不同的圖像格式。

物理素描

畫任何您喜歡的東西，看看它們在模擬重力作用下如何反應。

畫板

強大的HTML5繪圖應用程序，使您能夠以精確的方式繪製和編輯圖像。

短暫聊天

一個Web應用程序，用於確認從Twitter獲取的與天氣有關的消息的地理位置，從而將其形成為基於畫布的“社交天氣”地圖，這很瑣碎（如作者所述），但很有趣。

遊戲

3無聊

如果您可以在下一秒內繼續躲避數百個HTML5項目符號，則永遠不會感到無聊。

爆發

反彈球，打破所有障礙。

帆佈景觀

它不是一個遊戲，但是它演示瞭如何使用HTML5開發“第一人稱射擊”瀏覽器遊戲。

抓住它

您可以躲避多少球才能贏得HTML5方形方塊？

連鎖反應

連鎖爆炸達到目標，不要上癮。

立方體

以自上而下的3D視角播放俄羅斯方塊。

etcha物理

抽獎物品將球移動到星空，不要忘記重力。

拼圖遊戲

單擊，旋轉和放下拼圖，即可解決此基於HTML5的拼圖遊戲。

幻燈片拼圖

滑向勝利，這是另一個HTML5遊戲，旨在吸引您的注意力。

同一個遊戲

刪除某些組以使另一組以相同的顏色配對，您最終將獲得勝利。

俄羅斯方塊

HTML5是最經典的遊戲之一。

圓環面

另一個偽3D版本的俄羅斯方塊遊戲。