CSS3 復選框動畫特效

hmp07 8年前發布 | 12K 次閱讀 CSS3 CSS 前端技術

Action one

demo1.gif

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CheckBox</title>
    <style>
        .checkbox {
            width: 900px;
            padding: 3% 0%;
            margin: 50px auto;
            background-color: cornsilk;
            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: #eeeeee;
            position: absolute;
            left: 1px;
            top: 1px;
            transform: translateX(0px);
            transition: transform .2s ease-in;
        }

        .checkbox [type="checkbox"]:checked + label {
            background-color: khaki;
            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;
        }
    </style>
</head>
<body>
<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>

</body>
</html>

Action two

demo2.gif

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .checkbox {
            width: 900px;
            padding: 3% 0px;
            margin: 50px auto;
            background-color: cornsilk;
            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: khaki;
            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;
        }
    </style>
</head>
<body>
<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>

</body>
</html>

以上代碼理解起來并不難，如果你認真閱讀了我前幾篇文章的話，如果你還沒看到，建議你前去查看。

 

來自：http://www.jianshu.com/p/fa10f4790e6e

 

 本文由用戶 hmp07 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！