标签：
css3的实现的checkbox复选框和radio单选框绚丽美化效果:
在css3之前要美化单选框和复选框无非是使用图片进行相关的替换操作，并且还有很大的局限性。
由于css3的出现，一切好像变的都变的轻松起来，并且效果非常的绚丽，这是使用css2无法做到的，下面就分享一段能够实现此功能的代码实例，需要的朋友可以做一下参考。
代码如下:
<!DOCTYPE html><html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <head> <style type="text/css"> @-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; background:#cbd1d8; border:none; color:#fff; cursor:pointer; display:inline-block; outline:none; position:relative; margin-right:0.5rem; z-index:1000; } .option-input:hover{ background:#9faab7; } .option-input:checked{ background:#40e0d0; } .option-input:checked::before{ width:40px; height:40px; position:absolute; content:‘\2716‘; display:inline-block; font-size:26.66667px; text-align:center; line-height:40px; } .option-input:checked::after{ -webkit-animation:click-wave 0.65s; -moz-animation:click-wave 0.65s; animation:click-wave 0.65s; background:#40e0d0; content:‘‘; display:block; position:relative; z-index:100; } .option-input.radio{ border-radius:50%; } .option-input.radio::after{ border-radius:50%; } body{ display:-webkit-box; display:-moz-box; display:box; -webkit-box-orient:horizontal; -moz-box-orient:horizontal; box-orient:horizontal; -webkit-box-pack:start; -moz-box-pack:start; box-pack:start; -webkit-box-align:stretch; -moz-box-align:stretch; box-align:stretch; background:#e8ebee; color:#9faab7; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; text-align:center; } body div{ padding:5rem; } body label{ display:block; line-height:40px; } </style> </head> <body> <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> </body> </html>
上面的代码实现了我们的要求，这里不多介绍，如有问题可以跟帖留言。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=15388
更多内容可以参阅:http://www.softwhy.com/divcss/
css3的实现的checkbox复选框和radio单选框绚丽美化效果
标签：
原文地址：http://www.cnblogs.com/nulifendou/p/5150041.html
