共计 744 个字符,预计需要花费 2 分钟才能阅读完成。
这是一个纯 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