“我正在参加 码上掘金体验活动，详情：show出你的创意代码块”
一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。
前言
娃娃机，又称选物贩卖，中国台湾俗称夹娃娃机，中国香港称夹公仔机，在国内也叫抓娃娃机，为一种源于日本的电子游戏。日语原名UFO CATCHER。娃娃机属于礼品贩卖机，是大型游戏机里面较简单的一种。
实现
布局
<div class="container">
<div class="machine-bottom"></div>
<!-- 下半部分 -->
<div class="toys">
<!-- 玻璃 -->
<div class="claw">
<!-- 抓夹 -->
<div class="claw-part-back"></div>
<div class="claw-part-left"></div>
<div class="claw-part-right"></div>
</div>
<div class="claw-arm"></div>
<div class="alien">
<div class="antenna"></div>
<div class="ear-left"></div>
<div class="ear-right"></div>
<div class="head">
<div class="eyes"></div>
<div class="pupils"></div>
<div class="mouth"></div>
</div>
<div class="body"></div>
<div class="arm-left"></div>
<div class="arm-right"></div>
<div class="leg-left"></div>
<div class="leg-right"></div>
<div class="collar"></div>
</div>
<div class="block-two"></div>
<div class="bear-one">
<div class="ear-left"></div>
<div class="ear-right"></div>
<div class="arm-left"></div>
<div class="arm-right"></div>
<div class="body"></div>
<div class="head">
<div class="eyes"></div>
<div class="nose"></div>
</div>
</div>
<div class="ball-two"></div>
<div class="block-one"></div>
<div class="bear-two">
<div class="ear-left"></div>
<div class="ear-right"></div>
<div class="arm-left"></div>
<div class="arm-right"></div>
<div class="body"></div>
<div class="head">
<div class="eyes"></div>
<div class="nose"></div>
</div>
</div>
<div class="ball-three"></div>
<div class="ball-one"></div>
</div>
<div class="machine-bars"></div>
<!-- 柱子 -->
<div class="opening"></div>
<!-- 取娃娃口 -->
<div class="coins">
<!-- 投币 -->
<div class="coin-items"></div>
</div>
<div class="controls"></div>
<div class="controls-top"></div>
<!-- 操作手柄 -->
<div class="machine-top">
<!-- 娃娃机标题 -->
<h1>
CLAW GAME
</h1>
</div>
<div class="machine-border"></div>
<div class="controls-buttons">
<!-- 按钮 -->
<div class="round-button"></div>
<div class="lever-bottom"></div>
<div class="lever-handle"></div>
<!-- 手柄 -->
<div class="display"></div>
</div>
</div>
动画样式
css部分我们来编写一下抓夹的基础样式跟动画，宽高布局之类的上面有一个整体的布局，这里我们使用了一个@keyframes、transform的属性，就是为了让我们可以看到一个抓夹自动的视角，如果不设置的话我们只能在2d的空间里进行操作吗，transform: translateX(0)的属性也就是根据x轴和y轴，设置了之后我们就多了一个X轴可以操作。之后就是加上一个夹起娃娃并脱落的动画，看如下动画效果代码。
@keyframes claw-arm-move {
0% {
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
25% {
-ms-transform: translateX(80px);
-webkit-transform: translateX(80px);
-moz-transform: translateX(80px);
-o-transform: translateX(80px);
transform: translateX(80px);
height: 70%;
}
50% {
-ms-transform: translateX(80px);
-webkit-transform: translateX(80px);
-moz-transform: translateX(80px);
-o-transform: translateX(80px);
transform: translateX(80px);
height: 30%;
}
100% {
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes claw-hand-move {
0% {
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
25% {
-ms-transform: translateX(80px);
-webkit-transform: translateX(80px);
-moz-transform: translateX(80px);
-o-transform: translateX(80px);
transform: translateX(80px);
top: 65%;
}
50% {
-ms-transform: translateX(80px);
-webkit-transform: translateX(80px);
-moz-transform: translateX(80px);
-o-transform: translateX(80px);
transform: translateX(80px);
top: 20%;
}
100% {
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes claw-part-left {
0% {
-ms-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
transform: rotate(5deg);
}
25% {
-ms-transform: rotate(22deg);
-webkit-transform: rotate(22deg);
-moz-transform: rotate(22deg);
-o-transform: rotate(22deg);
transform: rotate(22deg);
}
50% {
-ms-transform: rotate(22deg);
-webkit-transform: rotate(22deg);
-moz-transform: rotate(22deg);
-o-transform: rotate(22deg);
transform: rotate(22deg);
}
100% {
-ms-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
transform: rotate(5deg);
}
}
@keyframes claw-part-right {
0% {
-ms-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
transform: rotate(-5deg);
}
25% {
-ms-transform: rotate(-22deg);
-webkit-transform: rotate(-22deg);
-moz-transform: rotate(-22deg);
-o-transform: rotate(-22deg);
transform: rotate(-22deg);
}
50% {
-ms-transform: rotate(-22deg);
-webkit-transform: rotate(-22deg);
-moz-transform: rotate(-22deg);
-o-transform: rotate(-22deg);
transform: rotate(-22deg);
}
100% {
-ms-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
transform: rotate(-5deg);
}
}
@keyframes alien-move {
0% {
-ms-transform: translateY(80px);
-webkit-transform: translateY(80px);
-moz-transform: translateY(80px);
-o-transform: translateY(80px);
transform: translateY(80px);
}
60% {
-ms-transform: translateY(-130px);
-webkit-transform: translateY(-130px);
-moz-transform: translateY(-130px);
-o-transform: translateY(-130px);
transform: translateY(-130px);
}
}
总结
整篇主要用到的是css布局,背景，还有抓娃娃部分用到的@keyframes、transform的平移旋转等css样式组合成的一个实现自动抓娃娃的效果，当然要是市场上的娃娃也这么好抓就好了。哈哈哈哈哈哈哈哈哈
