做一個好看的紅白機模擬器

dackel 發布于2019-08-30 15:56 / 2341人閱讀

這是一個純css實現的紅白機模擬器，沒有使用到任何圖片，如下圖所示

同時支持移動端橫豎屏模式

豎屏

橫屏

項目地址

https://github.com/XboxYan/NintendoNes

下面對該樣式中的疑難點總結一下。

反向圓角

這一部分采用radial-gradient完成

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

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

高光陰影

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

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

如果是不規則投影，可以使用drop-shadow實現

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

橫屏豎屏

改項目還兼容了移動端橫豎屏，對應不同的樣式，可以使用css mediaorientation來實現

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

其他可以前往項目查看源碼。

樣式上的疑難點大致是以上幾點，當然如果你使用圖片來實現的話可以當我沒說[捂臉]。

可以玩嗎

當然。

你可以打開下面鏈接

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

或者掃描以下二維碼

這里借助了jsnes來完成。

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

感謝閱讀，歡迎star

GPU云服務器云服務器紅白機做一個做一個網站如何做一個

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117547.html

做一個好看的紅白機模擬器

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

y1chuan 2019-08-23 16:02 評論0 收藏0
Netty 源碼分析之一揭開 Bootstrap 神秘的紅蓋頭 (客戶端)

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

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

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

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

摘要：背景在工作中雖然我經常使用到庫但是很多時候對的一些概念還是處于知其然不知其所以然的狀態因此就萌生了學習源碼的想法剛開始看源碼的時候自然是比較痛苦的主要原因有兩個第一網上沒有找到讓我滿意的詳盡的源碼分析的教程第二我也是第一次系統地學習這么大代背景在工作中, 雖然我經常使用到 Netty 庫, 但是很多時候對 Netty 的一些概念還是處于知其然, 不知其所以然的狀態, 因此就萌生了學...

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

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

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