CSS3手势变换动画特效

CSS3手势变换动画特效CSS3手势变换动画特效是一款非常特别的CSS3动画，它展现在我们眼前的是一只手掌，手掌下方有一个滑动按钮，点击按钮即可切换手势，目前可以切换两种不同的手势。CSS3手势变换滑动按钮动画效果

input[type=checkbox] ~ .hand .finger:nth-of-type(1):after,
input[type=checkbox] ~ .hand .finger:nth-of-type(4):after {
  display: block;
}
input[type=checkbox] ~ .hand .finger:nth-of-type(1) {
  height: 187.5px;
}
input[type=checkbox] ~ .hand .finger.thumb {
  height: 136.36363636px;
}
input[type=checkbox]:checked ~ .hand .finger {
  height: 75px;
}
input[type=checkbox]:checked ~ .hand .finger:after {
  display: none;
}
input[type=checkbox]:checked ~ .hand .finger:before {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
}
input[type=checkbox]:checked ~ .hand .finger:nth-of-type(3) {
  height: 250px;
}
input[type=checkbox]:checked ~ .hand .finger:nth-of-type(3):before {
  top: 2%;
  background: rgba(255, 255, 255, 0.5);
  border-bottom-left-radius: 37.5px;
  border-bottom-right-radius: 37.5px;
}
input[type=checkbox]:checked ~ .hand .finger:nth-of-type(3):after {
  display: block;
}
input[type=checkbox]:checked ~ .hand .finger.thumb {
  height: 136.36363636px;
}