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

這是一個純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