用CSS实现带动画效果的单选框
预览一下效果：http://39.105.101.122/myhtml/CSS/singlebox2/singleRadio.html
布局结构为：
1 <div class="radio-1"> 2 <input type="radio" name="radio-1" id="radio-1-1" checked="checked"> 3 <label for="radio-1-1"></label> 4 5 <input type="radio" name="radio-1" id="radio-1-2"> 6 <label for="radio-1-2"></label> 7 8 <input type="radio" name="radio-1" id="radio-1-3"> 9 <label for="radio-1-3"></label> 10 </div>
type=“radio”定义单选按钮，label标签为 input 元素定义标注，把label标签的for属性设置为何input标签的id相同即可关联，当鼠标点击label的时候也会触发input。可以设置label的样式，隐藏input，当radio选中的时候，对应的label标签发生样式改变就可以。
label标签默认是不显示的，所以需要设置display属性为inline-block(行内块级元素，没有换行符)。
添加label的after，设置position为absolute，label的position为relative，after的大小位置设置好，添加transform: scale(0)缩小到看不到，然后当关联input选中（checked值是checked）的时候，再设置scale(1)，然后添加transition过渡属性。
在这里不需要用到js，当input选中的时候设置label属性可以这样写：
input:checked+label:after{ ... }
加号是相邻兄弟选择器（如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器）。这样当radio选中的时候，相对应的label标签的样式也会改变。
以上是一些需要注意的地方，其他的就是一些定位，颜色，宽度高度，边框属性了，这个可以自定义。
附上代码：
html:
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link href="singleRadio.css" rel="stylesheet" type="text/css"> 7 </head> 8 <body> 9 <div class="radio-1"> 10 <input type="radio" name="radio-1" id="radio-1-1" checked="checked"> 11 <label for="radio-1-1"></label> 12 13 <input type="radio" name="radio-1" id="radio-1-2"> 14 <label for="radio-1-2"></label> 15 16 <input type="radio" name="radio-1" id="radio-1-3"> 17 <label for="radio-1-3"></label> 18 </div> 19 <div class="radio-2"> 20 <input type="radio" name="radio-2" id="radio-2-1" checked="checked"> 21 <label for="radio-2-1"></label> 22 23 <input type="radio" name="radio-2" id="radio-2-2"> 24 <label for="radio-2-2"></label> 25 26 <input type="radio" name="radio-2" id="radio-2-3"> 27 <label for="radio-2-3"></label> 28 </div> 29 </body> 30 </html>
CSS:
1 /**{*/ 2 /*margin: 0;*/ 3 /*padding: 0;*/ 4 /*}*/ 5 .radio-1{ 6 width: 980px; 7 margin: 0 auto; 8 padding: 3% 0; 9 background-color: #3cc; 10 text-align: center; 11 } 12 .radio-1 input{ 13 display: none; 14 } 15 .radio-1 label{ 16 display: inline-block; 17 width: 28px; 18 height: 28px; 19 position: relative; 20 background-color: #ffffff; 21 border: 1px solid #cccccc; 22 margin-left: 10px; 23 border-radius: 100%; 24 cursor: pointer; 25 } 26 .radio-1 label:after{ 27 width: 20px; 28 height: 20px; 29 top: 4px; 30 left: 4px; 31 position: absolute; 32 background-color: #666666; 33 border-radius: 100%; 34 content: ""; 35 transform: scale(0); 36 transition: all .2s ease-in; 37 } 38 .radio-1 input:checked+label:after{ 39 transform: scale(1); 40 transition: all .2s ease-in; 41 } 42 .radio-1 input:checked+label{ 43 background-color: #eee; 44 transition: all .2s ease-out; 45 } 46 .radio-2{ 47 width: 980px; 48 margin: 0 auto; 49 padding: 3% 0; 50 text-align: center; 51 background-color: #fc9; 52 } 53 .radio-2 input{ 54 display: none; 55 } 56 .radio-2 label{ 57 width: 28px; 58 height: 28px; 59 border: 1px solid #ccc; 60 border-radius: 50%; 61 overflow: hidden; 62 margin-left: 10px; 63 background-color: #fff; 64 display: inline-block; 65 position: relative; 66 cursor: pointer; 67 } 68 .radio-2 label:after{ 69 content: ""; 70 width: 20px; 71 height: 20px; 72 position: absolute; 73 top: 4px; 74 left: 4px; 75 border-radius: 40%; 76 background-color: #666666; 77 transform-origin: -2px 50%; 78 transform: rotate(-180deg); 79 transition: all .2s ease-out; 80 } 81 .radio-2 input:checked+label:after{ 82 transform: rotate(0deg); 83 transition: all .2s ease-out; 84 } 85 .radio-2 input:checked+label{ 86 background-color: #eee; 87 transition: all .2s ease-out; 88 }
