整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
覽器和 JavaScript 的功能逐年不斷的變強變大。曾幾何時，任何類型的游戲都需要Flash。但隨著 HTML5 發展，HTML5 + WebGL 游戲式就慢慢占領著這個舞臺。以下是30款流行的游戲，它們可以在所有現代瀏覽器中運行，并且只使用web技術構建。
地址：http://hexgl.bkcore.com/
類型：街機，賽車
HexGL 是一款基于HTML5，JavaScript和WebGL的快節奏的賽車游戲。玩家可以使用鍵盤，觸摸屏設備或leap motion(體感控制器)來控制太空飛船。
地址：http://www.cross-code.com/en/home
類型：動作，角色扮演
一個復古靈感的2D游戲設定在遙遠的未來。這是一個充滿偉大的游戲機制，如組合，拼圖，技能樹，任務，物品等等。
地址：https://sketch-out.appspot.com/
類型：街機
Sketchout的任務保護你的行星，并通過改變流星的方向來消滅對手，通過使流星偏轉來保護您的星球并消滅對方，這款游戲有很棒的視覺效果和音樂特效。
地址：http://www.treasurearena.com/類型：多人，角色扮演，動作
Treasure Arena 是一款動態的競技場戰斗游戲，最多可容納4名玩家。它具有不同的游戲模式，出色的幀率和配樂，是一個非常有趣的游戲。
地址：http://bejeweled.popcap.com/html5/
類型：街機，解謎，娛樂
HTML5格式的經典“寶石迷陣”游戲。這是一個官方克隆，因此可以正常運行且外觀完美。
地址：http://missile-game.bwhmather.com/類型：街機
這是一款非常具有挑戰性的游戲，游戲中我們扮演的是一枚被發射進隧道的導彈。游戲有很酷的黑白圖像，玩的時候會有很強的場景效果。
地址：http://www.deconstructeam.com/games/gods-will-be-watching/類型：拼圖
在這個令人毛骨悚然（但又很棒）的游戲中，我和自己團隊必須獨自生存40天。團隊有六名成員，其中包括一只狗，一名精神病醫生和一個機器人，您必須與他們互動，以使其保持溫暖，溫飽和理智的狀態。
地址：http://www.sinuousgame.com/類型：街機
一個簡單的游戲，極簡的圖形和流暢的幀率。拾取電源時避免與紅點碰撞。此外，如果你想要那些額外的積分，就需要不停向前移動
地址：http://swooop.playcanvas.com/類型：街機
在一個美麗多彩的3D世界里，到處飛翔，收集寶石和星星。
地址：http://www.freeriderhd.com/
Free Rider HD 是一款令人上癮的游戲，你可以在其他玩家繪制的賽道上騎自行車。可以在成千上萬的播放器曲目中選擇一個播放，也可以創建自己的曲目并分享。
地址：http://entanglement.gopherwoodstudios.com/zh-CN-index.html類型:拼圖,娛樂
這個游戲的目的是通過在網格上放置線段來創建一條盡可能長的路徑。你可以單獨玩，也可以和朋友一起玩。
地址：https://www.modern.ie/en-us/ie6countdown#escape-from-xp
類型：動作，街機
用“Escape from XP”來慶祝 Windows XP 的終結。你的任務是拯救最后一個陷入Clippy暴政的開發人員。
地址：http://polycraftgame.com/類型：角色扮演，塔防，動作
在這個很棒的3D游戲中，你到處收集資源，建造東西，完成任務。關于它的所有東西都經過拋光，并且運行也非常順暢。
地址：https://gabrielecirulli.github.io/2048/類型：拼圖
一個非常上癮的游戲，你可能已經玩過了。在 2048 ，你移動編號的圖塊并合并它們。當界面中最大數字是`2048 時，游戲勝利。
地址：http://arcade.lostdecadegames.com/onslaught_arena/
類型:動作
一種快節奏的復古生存游戲，您可以使用不同的武器與成群的敵人作戰。
地址：http://chrome.angrybirds.com/類型:游戲
《憤怒的小鳥》游戲，這就不用介紹了。
地址:https://www.cubeslam.com/mcycrs
類型：街機，多人
具有豐富的色彩和炫酷的3D圖形乒乓球游戲。我們可以通過向朋友發送一個URL來挑戰他們，還可以通過網絡攝像頭看到對方。
地址：http://hypnoticowl.com/games/the-wizard/類型：動作，角色扮演，策略
Wizard 是基于回合的地牢爬行者，在里面會遇到神話般的怪物并找到奇妙的咒語。該游戲具有酷炫的戰斗機制，有時可能會帶來很大挑戰。
地址：http://phoboslab.org/xtype/類型：動作，街機
在這款酷炫的太空射擊游戲中，你目的就是要起戰勝 Boss。
地址：http://orteil.dashnet.org/cookieclicker/類型：休閑，搞笑
Cookie clicker 是一款可能為了開玩笑而創建的游戲，但仍然提供了大量的樂趣。你可以從0個cookie開始，然后單擊一些有效率的cookie，最后你可能會發現自己擁有數十億個cookie。
地址：http://play.elevatorsaga.com/類型：拼圖，編碼
這類屬于程序員類型游戲 。在電梯中的任務是通過對電梯的運動進行編程，以最有效的方式運送人員，這些都是用 JavaScript 來完成的。
地址：http://gameofbombs.com/landing類型：動作，角色扮演，多人
Game of Bombs是一個轟炸機類型的游戲，在廣闊地圖上，都有著敵方玩家。收集力量，皮膚和成就，以成為最佳轟炸機玩家的方式。
地址：http://or.paleozoic.com/類型：平臺游戲，動作
Olympia Rising具有漂亮復古外觀圖形的游戲。它坐落在古希臘，在那里我們扮演的女人被賦予了重新的機會，所以我們的任務就是逃離死者的世界。
地址: https://ned.im/pixel-race-game/類型：街機，賽車
Pixel Race是一款簡單概念概念，你可以在收集硬幣的同時控制汽車以避開障礙物。如果有足夠的耐心和空閑時間，那么你可能會打破記錄（記錄為36309個硬幣）。
地址：https://littlealchemy.com/類型：拼圖
從這四個基本元素開始，將它們組合起來，創建510種可能的組合。
地址：http://www.kevs3d.co.uk/dev/arena5/類型：街機
在數字領域中飛行并射擊幾何敵人以獲得高分。
地址:https://vector-runner-remix.tresensa.com/
類型：街機
在這個充滿色彩和幾何形狀的平臺游戲中，盡你所能奔跑吧。
地址：http://playbiolab.com/類型:動作
一款出色的像素藝術平臺游戲，你必須在這里逃脫充滿突變生物和其他不良生物的實驗室。
地址:http://worldsbiggestpacman.com/#類型：街機
地址：http://games.jessefreeman.com/new-super-resident-raver/
從即將到來的僵尸入侵中拯救驚慌失措的人們。收集錢，升級你的武器和戰斗僵尸。
作者：Danny Markov 來源：tutorialzin 譯者：前端小智
原文：https://tutorialzine.com/2015/02/30-amazing-games-made-only-with-html5
本文中，我們將分享26個純CSS構建地開源Web項目。為了保證開源項目的質量，Mybridge AI將結合各種因素來確保這些項目能為專業人士提供更好的幫助。這26個項目在CodePen的平均瀏覽量為79834，只為提供給你更優質的開源項目。
開發者們，準備接受啟發吧！
這些項目將向你證明，純CSS3就足以實現如此多炫酷的效果。 (而其中一些項目實現的效果比圖形設計的更好！）
開源的項目將可以幫助初學者更好的學習閱讀代碼，而且方便讓高級程序員們利用現有的代碼來節約時間。
一起來Enjoy吧！
===================================
No.1
CSS 3D太陽系
由 Julian Garnier 提供 [瀏覽量：730,931]
No.2
純CSS實現的蒙娜麗莎畫像
由 Jay Salvat 提供 [瀏覽量：342,711]
No.3
STAR WARS AT-AT步行者
由 Petr Urbánek 提供 [瀏覽量：20,356]
No.4
CSS實現的3D 飛行器 X-wing
由 Julian Garnier 提供 [瀏覽量：68,808]
No.5
CSS實現的Pip-Boy游戲《輻射4》[瀏覽量：20,258]
No.6
純CSS泰姬陵 [瀏覽量：44,178]
No.7
Alex制作的CSS雪橇犬
由 David Khourshid 提供 [瀏覽量：104,245]
No.8
500行純CSS代碼制作的一個平行停車應用
由 Jota Teles 提供 [瀏覽量：25,329]
No.9
CSS實現的城市中正在行駛汽車的效果 [瀏覽量：23,657]
No.10
CSS 3D Hartwig國際象棋（完全可玩版）
由 Julian Garnier 提供 [瀏覽量：144,063]
No.11
CSS 行走大象先生動畫 [瀏覽量：22,885]
No.12
純CSS Coffee App界面
由 David Khourshid 提供 [瀏覽量：31,182]
No.13
純CSS實現的冰沙機APP [瀏覽量：2671]
No.14
零行JS代碼實現的飛行游戲 [瀏覽量：196427]
No.15
CSS 月光之下
由 Case Sandberg 提供 [瀏覽量：4,264]
No.16
900行CSS代碼制作的狼動畫
由 María Renée Pacheco 提供 [瀏覽量：7,703]
No.17
純CSS實現的韓國燒烤之夜。沒有圖像，沒有任何的JavaScript [瀏覽量：11,965 Views]
No.18
CSS實現的任天堂游戲機
由 Vincent Durand 提供 [瀏覽量：102,089]
No.19
純CSS實現的Ken Burns全屏效果 [瀏覽量：19,711]
No.20
純CSS實現的快樂人物的動畫效果
由 ???? 提供 [瀏覽量：19,711]
No.21
純CSS實現的理發店 [瀏覽量：4395]
No.22
打開汽車后備箱的豐田鑰匙 [瀏覽量：2,375]
No.23
CSS實現的日歷APP
由 David Khourshid 提供 [瀏覽量：64,920]
No.24
CSS實現的復仇者聯盟
由 mario alejandro 提供 [瀏覽量：54,244]
No.25
CSS實現的圖標動畫懸停效果 [瀏覽量：11,096]
No.26
純CSS實現的一只鳥 [瀏覽量：3,939]
以上就是，令人印象深刻的純CSS實現的項目，希望你能找到一些靈感。
如果你覺得文章不錯，歡迎點贊、分享哦！
===================================
英文原文：26 Impressive web projects built with CSS only
譯者：IT程序獅
譯文源自：http://www.jianshu.com/p/b321d1095106
注：原創譯文，版權歸原作者所有，轉載請注明出處。謝謝合作。
CSS3響應式導航，可以根據自己的需求修改代碼，改變窗口查看響應式效果
純CSS3響應式導航
HTML代碼：
<div class="tpt-header"> <div class="tpt-logo"><a href="/"><img src="http://m.jungjaehyung.com/uploadfile/2024/0808/20240808043833470.png"></a></div> <input id="nav-btn" type="checkbox"> <label class="tpt-nav-btn" for="nav-btn"></label> <ul class="tpt-nav"> <li> <a class="tpt-nav-li" href="#">網站首頁</a> <ul class="tpt-nav-ul"></ul> </li> <li> <input id="nav-2" type="checkbox"><label class="tpt-nav-li" for="nav-2">新聞資訊</label> <ul class="tpt-nav-ul"> <li><a href="#">國內新聞</a></li><li><a href="#">國際新聞</a></li></ul> </li> <li> <input id="nav-3" type="checkbox"><label class="tpt-nav-li" for="nav-3">科技頭條</label> <ul class="tpt-nav-ul"> <li><a href="#">人工智能</a></li><li><a href="#">虛擬現實</a></li></ul> </li> </ul> </div>
CSS代碼：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
