「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;
  }
}

最终UI

后续

好友说，这些运动中的圈圈，看着真解压，好像烦恼减少了。我说你烦恼减少不是因为这个，是因为你头发少，俗话「三千烦恼丝」，你都快秃了，哪来的烦恼。

好友说今天饭局都推了，待会去我家，测试我家杯子的把手是否牢固。

看来今天要赶在她来之前到家了。

又是充满乐趣的一天，下个小创意见吧~