之前为大家分享了好多css3实现的按钮。今天要为大家分享的是纯css3实现的checkbox复选框和radio单选框，效果超级炫。先让我们看看图吧! 
源码下载
这个实例完全由css3实现的没有任何js代码。下面我们一起看下实现代码吧
html代码：
<div style=”width:200px; float:left”>
<label>
<input type=”checkbox” class=”option-input checkbox” checked=””>
Checkbox
</label>
<label>
<input type=”checkbox” class=”option-input checkbox”>
Checkbox
</label>
<label>
<input type=”checkbox” class=”option-input checkbox”>
Checkbox
</label>
</div>
<div style=”width:200px; float:left”>
<label>
<input type=”radio” class=”option-input radio” name=”example”>
Radio option
</label>
<label>
<input type=”radio” class=”option-input radio” name=”example”>
Radio option
</label>
<label>
<input type=”radio” class=”option-input radio” name=”example”>
Radio option
</label>
</div>
css3代码：
@-webkit-keyframes click-wave {
0% {
width: 40px;
height: 40px;
opacity: 0.35;
position: relative;
}
100% {
width: 200px;
height: 200px;
margin-left: -80px;
margin-top: -80px;
opacity: 0.0;
}
}
@-moz-keyframes click-wave {
0% {
width: 40px;
height: 40px;
opacity: 0.35;
position: relative;
}
100% {
width: 200px;
height: 200px;
margin-left: -80px;
margin-top: -80px;
opacity: 0.0;
}
}
@-o-keyframes click-wave {
0% {
width: 40px;
height: 40px;
opacity: 0.35;
position: relative;
}
100% {
width: 200px;
height: 200px;
margin-left: -80px;
margin-top: -80px;
opacity: 0.0;
}
}
@keyframes click-wave {
0% {
width: 40px;
height: 40px;
opacity: 0.35;
position: relative;
}
100% {
width: 200px;
height: 200px;
margin-left: -80px;
margin-top: -80px;
opacity: 0.0;
}
}
.option-input {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
position: relative;
top: 13.33333px;
width: 40px;
height: 40px;
-webkit-transition: all 0.15s ease-out 0;
-moz-transition: all 0.15s ease-out 0;
transition: all 0.15s ease-out 0;
