CSS3实现自定义Checkbox动画代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3实现自定义Checkbox动画代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS3实现自定义Checkbox动画 </title>
    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
    <div class="container">
        <h2>
            Check it out!
        </h2>
        <input type="checkbox" id="cbtest" />
        <label for="cbtest" class="check-box"></label>
    </div>
</body>
</html>

CSS代码(style.css):

/* Made by Jimmy Gillam */
html,body{padding:0;margin:0;background-color:#667788;color:#efefef;font-family:'Open Sans';}
.container{box-sizing:border-box;padding:25px;text-align:center;}
.container h2{margin-bottom:40px;}
.container p{margin-top:40px;}
/* Checkmark style starts */
@-moz-keyframes dothabottomcheck{0%{height:0;}
100%{height:50px;}
}
@-webkit-keyframes dothabottomcheck{0%{height:0;}
100%{height:50px;}
}
@keyframes dothabottomcheck{0%{height:0;}
100%{height:50px;}
}
@keyframes dothatopcheck{0%{height:0;}
50%{height:0;}
100%{height:120px;}
}
@-webkit-keyframes dothatopcheck{0%{height:0;}
50%{height:0;}
100%{height:120px;}
}
@-moz-keyframes dothatopcheck{0%{height:0;}
50%{height:0;}
100%{height:120px;}
}
input[type=checkbox]{display:none;}
.check-box{height:100px;width:100px;background-color:transparent;border:10px solid black;border-radius:5px;position:relative;display:inline-block;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-moz-transition:border-color ease 0.2s;-o-transition:border-color ease 0.2s;-webkit-transition:border-color ease 0.2s;transition:border-color ease 0.2s;cursor:pointer;}
.check-box::before,.check-box::after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;height:0;width:20px;background-color:#34b93d;display:inline-block;-moz-transform-origin:left top;-ms-transform-origin:left top;-o-transform-origin:left top;-webkit-transform-origin:left top;transform-origin:left top;border-radius:5px;content:' ';-webkit-transition:opacity ease .5;-moz-transition:opacity ease .5;transition:opacity ease .5;}
.check-box::before{top:72px;left:41px;box-shadow:0 0 0 5px #667788;-moz-transform:rotate(-135deg);-ms-transform:rotate(-135deg);-o-transform:rotate(-135deg);-webkit-transform:rotate(-135deg);transform:rotate(-135deg);}
.check-box::after{top:37px;left:5px;-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);}
input[type=checkbox]:checked + .check-box,.check-box.checked{border-color:#34b93d;}
input[type=checkbox]:checked + .check-box::after,.check-box.checked::after{height:50px;-moz-animation:dothabottomcheck 0.2s ease 0s forwards;-o-animation:dothabottomcheck 0.2s ease 0s forwards;-webkit-animation:dothabottomcheck 0.2s ease 0s forwards;animation:dothabottomcheck 0.2s ease 0s forwards;}
input[type=checkbox]:checked + .check-box::before,.check-box.checked::before{height:120px;-moz-animation:dothatopcheck 0.4s ease 0s forwards;-o-animation:dothatopcheck 0.4s ease 0s forwards;-webkit-animation:dothatopcheck 0.4s ease 0s forwards;animation:dothatopcheck 0.4s ease 0s forwards;}

附件:下载该文件资源,减少时间成本(增值服务)