灵感来源
和好友闲聊，聊到上次我画的掌上游戏机，她说突然想起来还有一种游戏机是那种可以套圈圈的。我也想起来，确实有一种游戏机，但是记不清确认的名字，所以我去搜索了一下，原来它叫水压套圈游戏机，网购平台上大部分简称套圈水机。
好友说，这个你能实现不，我看了看说，圆头圆脑的小可爱我基本都能实现，不过不能玩，玩的话是另外的价钱。
在好友发飙之前，我还是先来用CSS绘制一个套圈水机转移一下她的注意力吧。
在线预览
在线预览平台，可查看完整代码，并体验效果。
水机结构
水机包含游戏机身、机身图案、按键、透明屏幕、若干圈圈、两个竖针。
- 游戏机身：圆弧外观，加上阴影效果，可以增加立体感；
- 机身图案：因为是童年经典掌上游戏机，所以图案偏卡通；
- 按键：一般是左右两个按键，十字按键和圆形按键；
- 透明屏幕：
- 屏幕透明的效果通过将屏幕颜色的透明度降低实现；
- 立体效果，采用两次容器结构实现，两层容器使用不同颜色，上层容器加上一个外边框且比下层容器小；
- 屏幕中的背景图案，为游戏机增加了一丝趣味；
- 若干圈圈：圈圈都是通过圆形实现，圆外层加上边框，背景设置成透明；
- 两个竖针：竖针和机体连接处，为了表现立体感，在圆形容器上增加了一个圆圈图案。
注：目前不支持玩套圈圈的游戏，因为实现起来会比较困难，涉及到计算。
趣味功能
实现过程中，有几个有趣的功能，跟大家分享一下。
心形马赛克
因为我是参考购物网站上的游戏机图片进行实现的，正好屏幕上的图案是一个马赛克的心形，像素做的特别细，我估计要实现它得写个两天。
于是，我转换了思维，把马赛克的像素放大，间隙也放大，这样实现起来就变的简单了。
怎么实现马赛克效果呢？首先它肯定是类似线条形状的，然后把线段的类型改成点状便可以了。但是一个个写肯定不现实，一个完整的心的形状，少说20+的像素点。突然想到，box-shadow属性可以设置一个或多个下拉阴影的框。只要位置设置合理，理论上是可以实现一个心的形状的。
线条形状的心形，一条线可以看做是一列，这一列的点的横坐标肯定是一致的。心形是两端段，中间长，这样一来就能实现一个完整的心形了。
.curtain-heart-box::before { content: ''; position: absolute; top: 0; left: 14px; width: 5px; height: 5px; box-shadow: /* 第1列 */30px60px#f7bf66, 30px 75px #f7bf66, 30px 90px #f7bf66, /* 第2列 */45px50px#f7bf66, 45px 65px #f7bf66, 45px 80px #f7bf66, 45px 95px #f7bf66, 45px 110px #f7bf66, /* 第3列 */60px50px#f7bf66, 60px 65px #f7bf66, 60px 80px #f7bf66, 60px 95px #f7bf66, 60px 110px #f7bf66, 60px 125px #f7bf66, /* 第4列 */75px60px#f7bf66, 75px 75px #f7bf66, 75px 90px #f7bf66, 75px 105px #f7bf66, 75px 120px #f7bf66, 75px 135px #f7bf66, /* 第5列 */90px60px#f7bf66, 90px 75px #f7bf66, 90px 90px #f7bf66, 90px 105px #f7bf66, 90px 120px #f7bf66, 90px 135px #f7bf66, 90px 150px #f7bf66, /* 第6列 */105px60px#f7bf66, 105px 75px #f7bf66, 105px 90px #f7bf66, 105px 105px #f7bf66, 105px 120px #f7bf66, 105px 135px #f7bf66, /* 第7列 */120px50px#f7bf66, 120px 65px #f7bf66, 120px 80px #f7bf66, 120px 95px #f7bf66, 120px 110px #f7bf66, 120px 125px #f7bf66, /* 第8列 */135px50px#f7bf66, 135px 65px #f7bf66, 135px 80px #f7bf66, 135px 95px #f7bf66, 135px 110px #f7bf66,/* 第9列 */150px60px#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: screenCircle255sinfinitealternateease-in-out; animation-delay: 1.5s; } @keyframesscreenCircle25 { 0% { bottom: 20px; } 50% { bottom: 165px; } 100% { bottom: 20px; } }
后续
好友说，这些运动中的圈圈，看着真解压，好像烦恼减少了。我说你烦恼减少不是因为这个，是因为你头发少，俗话「三千烦恼丝」，你都快秃了，哪来的烦恼。
好友说今天饭局都推了，待会去我家，测试我家杯子的把手是否牢固。
看来今天要赶在她来之前到家了。
又是充满乐趣的一天，下个小创意见吧~
