CSS3 Single-selection animation

This example implements two kinds of radio button animations, one for zooming, one for rotation, and the following for HTML layouts and CSS styles

HTML: This uses the label label's for property to bind the radio

<Divclass= "Radio-1"> 　　 <inputtype= "Radio"name= "Radio-1"ID= "Radio-1-1"checked= "Checked"> 　　 <label for= "Radio-1-1"></label> 　　 <inputtype= "Radio"name= "Radio-1"ID= "Radio-1-2"> 　　 <label for= "Radio-1-2"></label> 　　 <inputtype= "Radio"name= "Radio-1"ID= "Radio-1-3"> 　　 <label for= "Radio-1-3"></label></Div><Divclass= "Radio-2"> 　　 <inputtype= "Radio"name= "Radio-2"ID= "Radio-2-1"checked= "Checked"> 　　 <label for= "Radio-2-1"></label> 　　 <inputtype= "Radio"name= "Radio-2"ID= "Radio-2-2"> 　　 <label for= "Radio-2-2"></label> 　　 <inputtype= "Radio"name= "Radio-2"ID= "Radio-2-3"> 　　 <label for= "Radio-2-3"></label></Div>

As1

<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>

CSS3 Single-selection animation