css特效复选按钮

来源：互联网发布：泉山区淘宝编辑：程序博客网时间：2024/05/29 09:24

case1效果图：

实现过程：

html:

<div class="checkbox">    <input type="checkbox" id="checkbox-1" checked="checked">    <label for="checkbox-1"></label>    <input type="checkbox" id="checkbox-2">    <label for="checkbox-2"></label>    <input type="checkbox" id="checkbox-3">    <label for="checkbox-3"></label></div>

css:

.checkbox {            width: 900px;            padding: 3% 0px;            margin: 50px auto;            background-color: #999;            text-align: center;        }        .checkbox label {            position: relative;            display: inline-block;            width: 30px;            height: 30px;            margin-right: 10px;            overflow: hidden;            border: 1px solid #eeeeee;            background-color: #ffffff;            cursor: pointer;        }        .checkbox label:after {            content: "√";            position: absolute;            width: 28px;            height: 28px;            line-height: 26px;            background-color: pink;            color: #ffffff;            left: 1px;            top: 1px;            text-align: center;            transform: translateY(-30px);            transition: transform .2s ease-out;            border-radius: 4px;        }        .checkbox [type="checkbox"]:checked + label:after {            transform: translateY(0px);            transition: transform .2s ease-in;        }        .checkbox [type="checkbox"]{            display: none;        }

case2效果图：

html：

<div class="checkbox">    <input type="checkbox" id="checkbox-1">    <label for="checkbox-1"></label>    <input type="checkbox" id="checkbox-2">    <label for="checkbox-2"></label>    <input type="checkbox" id="checkbox-3">    <label for="checkbox-3"></label></div>

css:

 .checkbox {            width: 900px;            padding: 3% 0%;            margin: 50px auto;            background-color: #D6D6D6;            text-align: center;        }        .checkbox label {            display: inline-block;            width: 64px;            height: 32px;            margin-right: 10px;            background-color: #ffffff;            border: 1px solid #eeeeee;            border-radius: 17px;            cursor: pointer;            position: relative;            transition: background-color .2s ease-in;        }        .checkbox label:after {            content: "";            width: 30px;            height: 30px;            border-radius: 50%;            background-color: #999;            position: absolute;            left: 1px;            top: 1px;            transform: translateX(0px);            transition: transform .2s ease-in;        }        .checkbox [type="checkbox"]:checked + label {            background-color: yellow;            transition: background-color .2s ease-in;        }        .checkbox [type="checkbox"]:checked +label:after{            transform: translateX(30px);            transition: transform .2s ease-in;        }        .checkbox [type="checkbox"]{            display: none;        }

以上代码并不难理解，如有不懂赶紧去复习相关知识点哦，也可以下面留言，会给与及时回复！

如有不足，还望大腿指点！

0 0