CSS3单选动画

本示例实现了两种单选按钮动画效果，一种是缩放，一种是旋转，以下是html布局以及css样式

html：这里使用了label标签的for属性，以此来绑定radio

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

 

css

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