做一個(gè)好看的紅白機(jī)模擬器

y1chuan 發(fā)布于2019-08-23 16:02 / 3321人閱讀

這是一個(gè)純css實(shí)現(xiàn)的紅白機(jī)模擬器，沒有使用到任何圖片，如下圖所示

同時(shí)支持移動端橫豎屏模式

豎屏

橫屏

項(xiàng)目地址

https://github.com/XboxYan/NintendoNes

下面對該樣式中的疑難點(diǎn)總結(jié)一下。

反向圓角

這一部分采用radial-gradient完成

background: radial-gradient( circle at left bottom,transparent 14px, #da4a4a 15px);

也就是從transparent到#da4a4a的漸變，這里的臨界值沒有完全重疊，重疊會在谷歌瀏覽器產(chǎn)生一個(gè)很明顯的鋸齒效果

高光陰影

這一部分采用了多層box-shadow完成，如果是內(nèi)陰影需要增加inset

box-shadow: inset 0px 8px 0 0px rgba(255,255,255,.5);

如果是不規(guī)則投影，可以使用drop-shadow實(shí)現(xiàn)

filter: drop-shadow(5px 5px 0px rgba(255,255,255,.8));

橫屏豎屏

改項(xiàng)目還兼容了移動端橫豎屏，對應(yīng)不同的樣式，可以使用css mediaorientation來實(shí)現(xiàn)

@media screen and (orientation: landscape) {
/*橫屏 css*/
}
@media screen and (orientation: portrait) {
/*橫屏 css*/
}

其他可以前往項(xiàng)目查看源碼。

樣式上的疑難點(diǎn)大致是以上幾點(diǎn)，當(dāng)然如果你使用圖片來實(shí)現(xiàn)的話可以當(dāng)我沒說[捂臉]。

可以玩嗎

當(dāng)然。

你可以打開下面鏈接

https://web.codelabo.cn/NintendoNes/

或者掃描以下二維碼

這里借助了jsnes來完成。

目前僅內(nèi)置了馬里奧，將來會做成選擇游戲列表。

感謝閱讀，歡迎star

GPU云服務(wù)器云服務(wù)器紅白機(jī) 做一個(gè) 做一個(gè)網(wǎng)站如何做一個(gè)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102646.html

相關(guān)文章

做一個(gè)好看的紅白機(jī)模擬器

這是一個(gè)純css實(shí)現(xiàn)的紅白機(jī)模擬器，沒有使用到任何圖片，如下圖所示 showImg(https://segmentfault.com/img/bVbp0uy?w=1266&h=759); 同時(shí)支持移動端橫豎屏模式豎屏 showImg(https://segmentfault.com/img/bVbp0Fh?w=516&h=749); 橫屏 showImg(https://segmentfault...

dackel 2019-08-30 15:56 評論0 收藏0
Netty 源碼分析之一揭開 Bootstrap 神秘的紅蓋頭 (客戶端)

摘要：目錄源碼分析之番外篇的前生今世的前生今世之一簡介的前生今世之二小結(jié)的前生今世之三詳解的前生今世之四詳解源碼分析之零磨刀不誤砍柴工源碼分析環(huán)境搭建源碼分析之一揭開神秘的紅蓋頭源碼分析之一揭開神秘的紅蓋頭客戶端源碼分析之一揭開神秘的紅蓋頭服務(wù)器目錄 Netty 源碼分析之番外篇 Java NIO 的前生今世 Java NIO 的前生今世之一簡介 Java NIO 的前生今世 ...

zhaot 2019-08-14 16:37 評論0 收藏0
Netty 源碼分析之一揭開 Bootstrap 神秘的紅蓋頭 (服務(wù)器端)

摘要：目錄源碼分析之番外篇的前生今世的前生今世之一簡介的前生今世之二小結(jié)的前生今世之三詳解的前生今世之四詳解源碼分析之零磨刀不誤砍柴工源碼分析環(huán)境搭建源碼分析之一揭開神秘的紅蓋頭源碼分析之一揭開神秘的紅蓋頭客戶端源碼分析之一揭開神秘的紅蓋頭服務(wù)器目錄 Netty 源碼分析之番外篇 Java NIO 的前生今世 Java NIO 的前生今世之一簡介 Java NIO 的前生今世 ...

張金寶 2019-08-14 16:37 評論0 收藏0
源碼之下無秘密 ── 做最好的 Netty 源碼分析教程

摘要：背景在工作中雖然我經(jīng)常使用到庫但是很多時(shí)候?qū)Φ囊恍└拍钸€是處于知其然不知其所以然的狀態(tài)因此就萌生了學(xué)習(xí)源碼的想法剛開始看源碼的時(shí)候自然是比較痛苦的主要原因有兩個(gè)第一網(wǎng)上沒有找到讓我滿意的詳盡的源碼分析的教程第二我也是第一次系統(tǒng)地學(xué)習(xí)這么大代背景在工作中, 雖然我經(jīng)常使用到 Netty 庫, 但是很多時(shí)候?qū)?Netty 的一些概念還是處于知其然, 不知其所以然的狀態(tài), 因此就萌生了學(xué)...

shenhualong 2019-08-14 16:37 評論0 收藏0
刷到就是賺到！八月阿里 Android 高級崗面經(jīng)（年薪百萬）

摘要：前段時(shí)間，前同事跳槽，機(jī)緣巧合下面了阿里，本來憑著試一試的態(tài)度，卻不料好事成雙，拿到了，而且薪資也了。面就沒啥東西可聊的，基本上就是對此次面試的一個(gè)評價(jià)定薪等等一些之內(nèi)的話題。如果是現(xiàn)場面試，記得關(guān)注當(dāng)天的天氣，提前查一下路線。 ...

aisuhua 2021-09-26 09:55 評論0 收藏0