CSS3单选动画

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

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