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