Heim >Web-Frontend >HTML-Tutorial >css3的实现的checkbox复选框和radio单选框绚丽美化效果_html/css_WEB-ITnose
css3的实现的checkbox复选框和radio单选框绚丽美化效果_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:28:401222Durchsuche
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/
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：iframe标签 父子页面传值_html/css_WEB-ITnoseNächster Artikel：css3实现的绘制图形图案效果代码实例_html/css_WEB-ITnose