本示例实现了两种单选按钮动画效果，一种是缩放，一种是旋转，以下是html布局以及css样式
html：这里使用了label标签的for属性，以此来绑定radio
<div class="radio-1">
<input type="radio" name="radio-1" id="radio-1-1" checked="checked">
<label for="radio-1-1"></label> <input type="radio" name="radio-1" id="radio-1-2">
<label for="radio-1-2"></label> <input type="radio" name="radio-1" id="radio-1-3">
<label for="radio-1-3"></label>
</div>
<div class="radio-2">
<input type="radio" name="radio-2" id="radio-2-1" checked="checked">
<label for="radio-2-1"></label> <input type="radio" name="radio-2" id="radio-2-2">
<label for="radio-2-2"></label> <input type="radio" name="radio-2" id="radio-2-3">
<label for="radio-2-3"></label>
</div>
css
<style type="text/css">
.radio-1{
width: 980px;
margin: 0 auto;
padding: 3% 0;
background-color: #33cccc;
text-align: center;
}
.radio-1 [type="radio"]{
display: none;
}
.radio-1 label{
display: inline-block;
position: relative;
width: 28px;
height: 28px;
border: 1px #cccccc solid;
background-color: #ffffff;
margin-right: 10px;
cursor: pointer;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.radio-1 label:after{
content: "";
position: absolute;
top: 4px;
left: 4px;
width: 20px;
height: 20px;
background-color: #666666;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}
.radio-1 [type="radio"]:checked + label{
background-color: #e0e0e0;
-webkit-transition: background-color .2s ease-in;
-moz-transition: background-color .2s ease-in;
-ms-transition: background-color .2s ease-in;
-o-transition: background-color .2s ease-in;
transition: background-color .2s ease-in;
} .radio-1 [type="radio"]:checked + label:after{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: -webkit-transform .2s ease-in;
-moz-transition: -moz-transform .2s ease-in;
-ms-transition: -ms-transform .2s ease-in;
-o-transition: -o-transform .2s ease-in;
transition: transform .2s ease-in;
} .radio-2{
width: 980px;
margin: 0 auto;
padding: 3% 0;
background-color: #fc9;
text-align: center;
}
.radio-2 label{
display: inline-block;
position: relative;
overflow: hidden;
width: 28px;
height: 28px;
border: 1px #cccccc solid;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #ffffff;
margin-right: 10px;
cursor: pointer;
}
.radio-2 [type="radio"]{
display: none;
}
.radio-2 label:after{
content: "";
position: absolute;
top: 4px;
left: 4px;
width: 20px;
height: 20px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #666666;
-webkit-transform-origin: -2px 50%;
-moz-transform-origin: -2px 50%;
-ms-transform-origin: -2px 50%;
-o-transform-origin: -2px 50%;
transform-origin: -2px 50%;
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
-webkit-transition: -webkit-transform .2s ease-in;
-moz-transition: -moz-transform .2s ease-in;
-ms-transition: -ms-transform .2s ease-in;
-o-transition: -o-transform .2s ease-in;
transition: transform .2s ease-in;
}
.radio-2 [type="radio"]:checked + label:after{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform .2s ease-in;
-moz-transition: -moz-transform .2s ease-in;
-ms-transition: -ms-transform .2s ease-in;
-o-transition: -o-transform .2s ease-in;
transition: transform .2s ease-in;
}</style>
