本示例实现了两种单选按钮动画效果,一种是移动,一种是滑块,以下是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>