CSS畅想 | 好友想玩游戏机，我为她画了一个套圈水机
灵感来源
和好友闲聊，聊到上次我画的掌上游戏机，她说突然想起来还有一种游戏机是那种可以套圈圈的。我也想起来，确实有一种游戏机，但是记不清确认的名字，所以我去搜索了一下，原来它叫水压套圈游戏机，网购平台上大部分简称套圈水机。
好友说，这个你能实现不，我看了看说，圆头圆脑的小可爱我基本都能实现，不过不能玩，玩的话是另外的价钱。
在好友发飙之前，我还是先来用CSS绘制一个套圈水机转移一下她的注意力吧。
在线预览
在线预览平台，可查看完整代码，并体验效果。
水机结构
水机包含游戏机身、机身图案、按键、透明屏幕、若干圈圈、两个竖针。
- 游戏机身：圆弧外观，加上阴影效果，可以增加立体感；
- 机身图案：因为是童年经典掌上游戏机，所以图案偏卡通；
- 按键：一般是左右两个按键，十字按键和圆形按键；
- 透明屏幕：
- 屏幕透明的效果通过将屏幕颜色的透明度降低实现；
- 立体效果，采用两次容器结构实现，两层容器使用不同颜色，上层容器加上一个外边框且比下层容器小；
- 屏幕中的背景图案，为游戏机增加了一丝趣味；
- 若干圈圈：圈圈都是通过圆形实现，圆外层加上边框，背景设置成透明；
- 两个竖针：竖针和机体连接处，为了表现立体感，在圆形容器上增加了一个圆圈图案。
注：目前不支持玩套圈圈的游戏，因为实现起来会比较困难，涉及到计算。
趣味功能
实现过程中，有几个有趣的功能，跟大家分享一下。
心形马赛克
因为我是参考购物网站上的游戏机图片进行实现的，正好屏幕上的图案是一个马赛克的心形，像素做的特别细，我估计要实现它得写个两天。
于是，我转换了思维，把马赛克的像素放大，间隙也放大，这样实现起来就变的简单了。
怎么实现马赛克效果呢？首先它肯定是类似线条形状的，然后把线段的类型改成点状便可以了。但是一个个写肯定不现实，一个完整的心的形状，少说20+的像素点。突然想到，box-shadow属性可以设置一个或多个下拉阴影的框。只要位置设置合理，理论上是可以实现一个心的形状的。
线条形状的心形，一条线可以看做是一列，这一列的点的横坐标肯定是一致的。心形是两端段，中间长，这样一来就能实现一个完整的心形了。
.curtain-heart-box::before {
content: '';
position: absolute;
top: 0;
left: 14px;
width: 5px;
height: 5px;
box-shadow: /* 第1列 */ 30px 60px #f7bf66, 30px 75px #f7bf66, 30px 90px #f7bf66,
/* 第2列 */ 45px 50px #f7bf66, 45px 65px #f7bf66, 45px 80px #f7bf66, 45px 95px #f7bf66, 45px 110px #f7bf66,
/* 第3列 */ 60px 50px #f7bf66, 60px 65px #f7bf66, 60px 80px #f7bf66, 60px 95px #f7bf66, 60px 110px #f7bf66, 60px 125px #f7bf66,
/* 第4列 */ 75px 60px #f7bf66, 75px 75px #f7bf66, 75px 90px #f7bf66, 75px 105px #f7bf66, 75px 120px #f7bf66, 75px 135px #f7bf66,
/* 第5列 */ 90px 60px #f7bf66, 90px 75px #f7bf66, 90px 90px #f7bf66, 90px 105px #f7bf66, 90px 120px #f7bf66, 90px 135px #f7bf66, 90px 150px #f7bf66,
/* 第6列 */ 105px 60px #f7bf66, 105px 75px #f7bf66, 105px 90px #f7bf66, 105px 105px #f7bf66, 105px 120px #f7bf66, 105px 135px #f7bf66,
/* 第7列 */ 120px 50px #f7bf66, 120px 65px #f7bf66, 120px 80px #f7bf66, 120px 95px #f7bf66, 120px 110px #f7bf66, 120px 125px #f7bf66,
/* 第8列 */ 135px 50px #f7bf66, 135px 65px #f7bf66, 135px 80px #f7bf66, 135px 95px #f7bf66, 135px 110px #f7bf66,
/* 第9列 */ 150px 60px #f7bf66, 150px 75px #f7bf66, 150px 90px #f7bf66;
z-index: 30;
}立体宝石
平面的宝石没有诱惑力，立体的宝石怎么实现呢？
可以通过直线塑造棱角的效果，再加上窄下宽的图形设计，且上下图形的颜色要不一致，这样一来，一个立体的宝石就实现了。
游戏机的右上角就有一个红色的方形宝石。
.masonry-right {
width: 26px;
height: 26px;
background: #f8403c;
top: 20px;
right: 85px;
overflow: hidden;
transform: rotate(-45deg);
}
.masonry-right::before {
content: '';
width: 2px;
height: 35px;
position: absolute;
top: -5px;
left: 11px;
background: #fc9783;
z-index: 298;
transform: rotate(-45deg);
}
.masonry-right::after {
content: '';
width: 2px;
height: 35px;
position: absolute;
top: -5px;
left: 13px;
background: #fc9783;
z-index: 298;
transform: rotate(45deg);
}
.masonry-right-light {
position: absolute;
top: 7px;
left: 7px;
width: 12px;
height: 12px;
background: #fc9783;
z-index: 299;
}圈圈动效
圈圈移动的效果，是通过设置移动距离实现的，为了让不同的圈圈移动效果上不一致，所以某些圈圈设置了动画延时。
.screen-circle25 {
border-color: #ffb9c0;
bottom: 20px;
left: 215px;
animation: screenCircle25 5s infinite alternate ease-in-out;
animation-delay: 1.5s;
}
@keyframes screenCircle25 {
0% {
bottom: 20px;
}
50% {
bottom: 165px;
}
100% {
bottom: 20px;
}
}后续
好友说，这些运动中的圈圈，看着真解压，好像烦恼减少了。我说你烦恼减少不是因为这个，是因为你头发少，俗话「三千烦恼丝」，你都快秃了，哪来的烦恼。
好友说今天饭局都推了，待会去我家，测试我家杯子的把手是否牢固。
看来今天要赶在她来之前到家了。
又是充满乐趣的一天，下个小创意见吧~
作者：非职业「传道授业解惑」的开发者叶一一
简介：「趣学前端」、「CSS畅想」系列作者，华夏美食、国漫、古风重度爱好者，刑侦、无限流小说初级玩家。
如果看完文章有所收获，欢迎点赞👍 | 收藏⭐️ | 留言📝。
- 点赞
- 收藏
- 关注作者
评论（0）