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