css3的实现的checkbox复选框和radio单选框绚丽美化效果_html/css

css3的实现的checkbox复选框和radio单选框绚丽美化效果_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:28:40

原创

1445人浏览过

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/