本示例实现了两种单选按钮动画效果，一种是移动，一种是滑块，以下是html布局以及css样式
html：这里使用了label标签的for属性，以此来绑定radio
<div class="checkbox-1"> ???<input type="checkbox" name="checkbox-1" id="checkbox-1-1" checked="checked"> ???<label for="checkbox-1-1"></label> ???<input type="checkbox" name="checkbox-1" id="checkbox-1-2"> ???<label for="checkbox-1-2"></label> ???<input type="checkbox" name="checkbox-1" id="checkbox-1-3"> ???<label for="checkbox-1-3"></label></div><div class="checkbox-2"> ???<input type="checkbox" name="checkbox-2" id="checkbox-2-1" checked="checked"> ???<label for="checkbox-2-1"></label> ???<input type="checkbox" name="checkbox-2" id="checkbox-2-2"> ???<label for="checkbox-2-2"></label> ???<input type="checkbox" name="checkbox-2" id="checkbox-2-3"> ???<label for="checkbox-2-3"></label></div>
css
<style type="text/css"> ???.checkbox-1{ ???????width: 980px; ???????margin: 0 auto; ???????text-align: center; ???????padding: 3% 0; ???????background-color: #99cccc; ???} ???.checkbox-1 label{ ???????display: inline-block; ???????width: 10px; ???????height: 10px; ???????padding: 9px; ???????border: 1px #cccccc solid; ???????-webkit-border-radius: 4px; ???????-moz-border-radius: 4px; ???????border-radius: 4px; ???????background-color: #ffffff; ???????color: #333; ???????margin-right: 10px; ???????overflow: hidden; ???????position: relative; ???????cursor: pointer; ???} ???.checkbox-1 [type="checkbox"]{ ???????display: none; ???} ???.checkbox-1 label:after{ ???????content: ‘X‘; ???????font-family: Arial; ???????color: #ffffff; ???????background-color: #399; ???????position: absolute; ???????top: 1px; ???????left: 1px; ???????width: 26px; ???????height: 26px; ???????line-height: 26px; ???????-webkit-border-radius: 4px; ???????-moz-border-radius: 4px; ???????border-radius: 4px; ???????text-align: center; ???????-webkit-transform: translateY(-30px); ???????-moz-transform: translateY(-30px); ???????-ms-transform: translateY(-30px); ???????-o-transform: translateY(-30px); ???????transform: translateY(-30px); ???????-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; ???} ???.checkbox-1 [type="checkbox"]:checked + label:after{ ???????-webkit-transform: translateY(0); ???????-moz-transform: translateY(0); ???????-ms-transform: translateY(0); ???????-o-transform: translateY(0); ???????transform: translateY(0); ???????-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; ???} ???.checkbox-2{ ???????width: 980px; ???????margin: 0 auto; ???????text-align: center; ???????padding: 3% 0; ???????background-color: #99cccc; ???} ???.checkbox-2 label{ ???????display: inline-block; ???????width: 68px; ???????height: 34px; ???????border: 1px #cccccc solid; ???????-webkit-border-radius: 18px; ???????-moz-border-radius: 18px; ???????border-radius: 18px; ???????background-color: #ffffff; ???????margin-right: 10px; ???????position: relative; ???????cursor: pointer; ???????-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; ???} ???.checkbox-2 [type="checkbox"]{ ???????display: none; ???} ???.checkbox-2 label:after{ ???????content: ‘‘; ???????position: absolute; ???????left: 1px; ???????top: 1px; ???????width: 30px; ???????height: 30px; ???????border: 1px #e0e0e0 solid; ???????background-color: #ffffff; ???????-webkit-border-radius: 50%; ???????-moz-border-radius: 50%; ???????border-radius: 50%; ???????-webkit-transition: left .2s ease-in; ???????-moz-transition: left .2s ease-in; ???????-ms-transition: left .2s ease-in; ???????-o-transition: left .2s ease-in; ???????transition: left .2s ease-in; ???} ???.checkbox-2 [type="checkbox"]:checked + label{ ???????background-color: #33cc66; ???????-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; ???} ???.checkbox-2 [type="checkbox"]:checked + label:after{ ???????left: 35px; ???????-webkit-transition: left .2s ease-in; ???????-moz-transition: left .2s ease-in; ???????-ms-transition: left .2s ease-in; ???????-o-transition: left .2s ease-in; ???????transition: left .2s ease-in; ???}</style>CSS3复选框动画
原文地址：https://www.cnblogs.com/xiaobaizhiqian/p/8401710.html