CSS3复选框动画

CSS3复选框动画

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

 

posted @ 2018-02-01 23:10 小白知浅 阅读( ...) 评论( ...) 编辑 收藏