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/
时间： 2024-10-07 05:07:09