做一个好看的红白机模拟器

y1chuan 发布于2019-08-23 16:02 / 3242人阅读

这是一个纯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云服务器红白机做一个做一个网站如何做一个

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102646.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...

dackel 2019-08-30 15:56 评论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