JS复选框checkbox动画特效代码

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

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

以下是 JS复选框checkbox动画特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS复选框checkbox动画特效下载</title>
<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">
<link rel="stylesheet" href="css/highlight-9.5.0.min.css">
<link rel="stylesheet" href="dist/css/checkbix.min.css">
<link rel="stylesheet" href="demo/demo.css">

</head>
<body>
<div class="content">
	<h3>Default</h3>
		<input id="mycheckbox" type="checkbox" class="checkbix" data-text="Checkbix">

	<pre><code class="html">
	&lt;input id="mycheckbox" type="checkbox" class="checkbix" data-text="Checkbix"&gt;
	</code></pre>

		<h3>Size</h3>
		<input id="mycheckbox2" type="checkbox" class="checkbix" data-text="Large, checked" data-size="large" checked>
	<pre><code class="html">
	&lt;input id="myothercheckbox" type="checkbox" class="checkbix" data-text="Checkbix. Large, checked" data-size="large" checked&gt;
	</code></pre>

		<h3>Shape</h3>

		<p>Square is default</p>

		<input id="mycheckbox3" type="checkbox" class="checkbix" data-shape="circled" data-text="Circled">
	<pre><code class="html">
	&lt;input id="mycheckbox3" type="checkbox" class="checkbix" data-text="Circled. Large, checked" data-shape="circled"&gt;
	</code></pre>

		<h3>Colors</h3>
		<input id="mycheckbox4" type="checkbox" class="checkbix" data-shape="circled" data-color="black" data-text="Black, circled" checked>
	<pre><code class="html">
	&lt;input id="mycheckbox4" type="checkbox" class="checkbix" data-shape="circled" data-color="black" data-text="Black, circled" checked&gt;
	</code></pre>

		<input id="mycheckbox5" type="checkbox" class="checkbix" data-color="blue" data-text="Blue" checked>
	<pre><code class="html">
	&lt;input id="mycheckbox5" type="checkbox" class="checkbix" data-color="blue" data-text="Blue" checked&gt;
	</code></pre>

		<input id="mycheckbox6" type="checkbox" class="checkbix" data-shape="circled" data-size="large" data-color="red" data-text="Red, large" checked>
	<pre><code class="html">
	&lt;input id="mycheckbox6" type="checkbox" class="checkbix" data-size="large" data-color="red" data-text="Red, large" checked&gt;
	</code></pre>

		<input id="mycheckbox7" type="checkbox" class="checkbix" data-color="gray" data-text="Gray" checked>
	<pre><code class="html">
	&lt;input id="mycheckbox7" type="checkbox" class="checkbix" data-color="gray" data-text="Gray" checked&gt;
	</code></pre>

		<input id="mycheckbox8" type="checkbox" class="checkbix" data-shape="circled" data-color="orange" data-text="Orange, circled" checked>
	<pre><code class="html">
	&lt;input id="mycheckbox8" type="checkbox" class="checkbix" data-shape="circled" data-color="orange" data-text="Orange, circled" checked&gt;
	</code></pre>

	<h3>Customize ARIA label</h3>
		<input id="mycheckbox9" type="checkbox" class="checkbix" data-shape="circled" data-color="black" data-text="Black, circled" data-arialabel="Checkbix is nice" checked>
	<pre><code class="html">
	&lt;input id="mycheckbox9" type="checkbox" class="checkbix" data-shape="circled" data-color="orange" data-text="Black, circled" data-arialabel="Checkbix is nice" checked&gt;
	</code></pre>
</div>

<script src="demo/highlight-9.5.0.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="dist/js/checkbix.min.js"></script>
<script type="text/javascript">
	Checkbix.init();
</script>
</body>
</html>

JS代码(checkbix.js):

/* global define,exports:true,module*/
(function(root,factory){
	'use strict';
	if(typeof define === 'function' && define.amd){
	define('Checkbix',factory);
}
else if(typeof exports === 'object'){
	exports = module.exports = factory();
}
else{
	root.Checkbix = factory();
}
}
)(this,function(){
	'use strict';
	var checkBix ={
}
;
	var settings;
	// Default settingsvar defaults ={
	initClass:'checkbix',}
;
	/*** A simple forEach() implementation for Arrays,Objects and NodeLists* @private*/
var forEach = function (collection,callback,scope){
	if (Object.prototype.toString.call(collection) === '[object Object]'){
	for (var prop in collection){
	if (Object.prototype.hasOwnProperty.call(collection,prop)){
	callback.call(scope,collection[prop],prop,collection);
}
}
}
else{
	for (var i = 0,len = collection.length;
	i < len;
	i++){
	callback.call(scope,collection[i],i,collection);
}
}
}
;
	/*** Merge defaults with user options* @private*/
var extend = function ( defaults,options ){
	var extended ={
}
;
	forEach(defaults,function (value,prop){
	extended[prop] = defaults[prop];
}
);
	forEach(options,function (value,prop){
	extended[prop] = options[prop];
}
);
	return extended;
}
;
	/*** Handle events* @private*/
var buildMarkup = function (){
	var checkboxes = document.querySelectorAll('.'+settings.initClass);
	for (var i = 0;
	i < checkboxes.length;
	i++){
	var size = checkboxes[i].getAttribute('data-size') ? checkboxes[i].getAttribute('data-size'):'';
	var arialabel = checkboxes[i].getAttribute('data-arialabel') ? checkboxes[i].getAttribute('data-arialabel'):'';
	checkboxes[i].insertAdjacentHTML('afterend','<label aria-label="'+arialabel+'" role="checkbox" for="'+checkboxes[i].id+'" class="'+settings.initClass+'"><span class="'+size+'"></span>'+checkboxes[i].getAttribute('data-text')+'</label>');
}
}
;
	/*** Destroy the current initialization.* @public*/
checkBix.destroy = function (){
	// If plugin isn't already initialized,stopif ( !settings ) return;
	// Remove event listenersdocument.removeEventListener('click',buildMarkup,false);
	// Reset variablessettings = null;
}
;
	/*** Initialize* @public*/
checkBix.init = function ( options ){
	// Destroy any existing initializationscheckBix.destroy();
	// Merge user options with defaultssettings = extend( defaults,options ||{
}
);
	// Add events,currently only the checkbox markup builddocument.addEventListener('DOMContentLoaded',buildMarkup,false);
}
;
	return checkBix;
}
);

CSS代码(checkbix.css):

input[type='checkbox'].checkbix{position:absolute;opacity:0;z-index:-1;}
input[type='checkbox'].checkbix + label{position:relative;display:inline-flex;align-items:center;color:inherit;transition:all 250ms cubic-bezier(.4,.0,.23,1);margin-bottom:.15rem;}
input[type='checkbox'].checkbix + label > span{display:flex;justify-content:center;align-items:center;margin-right:.5em;width:16px;height:16px;background:transparent;border:.1rem solid #333;border-radius:1px;cursor:pointer;transition:all 250ms cubic-bezier(.4,.0,.23,1);position:relative;}
input[type='checkbox'].checkbix:focus + label > span{outline:0;border-color:rgb(0,20,20);box-shadow:0 0 0 1px rgba(0,20,20,.5);}
input[type='checkbox'].checkbix:checked + label > span{background:#5ECD62;border:.1rem solid transparent;animation:reveal 200ms cubic-bezier(.4,.0,.5,1);}
input[type='checkbox'].checkbix:checked + label > span:before{content:"";position:absolute;top:0;left:22%;margin-left:auto;margin-right:auto;border-right:2px solid transparent;border-bottom:2px solid transparent;transform:rotate(45deg);transform-origin:0% 100%;animation:checkboxcheck 125ms 50ms cubic-bezier(.1,.0,.1,1) forwards;}
@keyframes reveal{0%{transform:scale(1);}
33%{transform:scale(.5);}
100%{transform:scale(1);}
}
@keyframes checkboxcheck{0%{width:0;height:0;border-color:white;transform:rotate(45deg);}
33%{width:.2em;height:.3em;transform:rotate(45deg);}
100%{width:.2em;height:.4em;border-color:white;transform:rotate(45deg);}
}
/* Size */
input[type='checkbox'].checkbix[data-size='large'] + label > span{width:24px;height:24px;}
input[type='checkbox'].checkbix[data-size='large'] + label > span:before{animation:checkboxchecklarge 125ms 50ms cubic-bezier(.1,.0,.1,1) forwards;border-right:3px solid transparent;border-bottom:3px solid transparent;}
@keyframes checkboxchecklarge{0%{width:0;height:0;border-color:white;transform:rotate(45deg);}
33%{width:.3em;height:.6em;transform:rotate(45deg);}
100%{width:.3em;height:.6em;border-color:white;transform:rotate(45deg);}
}
/* Shape */
input[type='checkbox'].checkbix[data-shape='circled'] + label > span{border-radius:100%;}
/* Colors */
input[type='checkbox'].checkbix[data-color='black']:checked + label > span{background:#111;}
input[type='checkbox'].checkbix[data-color='blue']:checked + label > span{background:#0074D9;}
input[type='checkbox'].checkbix[data-color='red']:checked + label > span{background:#FF4136;}
input[type='checkbox'].checkbix[data-color='gray']:checked + label > span{background:#AAAAAA;}
input[type='checkbox'].checkbix[data-color='orange']:checked + label > span{background:#FF851B;}

CSS代码(zzsc-demo.css):

body,html{font-size:100%;padding:0;margin:0;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","瀹嬩綋","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
a{color:rgba(255,255,255,0.6);outline:none;text-decoration:none;-webkit-transition:0.2s;transition:0.2s;}
a:hover,a:focus{color:#74777b;text-decoration:none;}
.zzsc-container{margin:0 auto;}
.bgcolor-1{background:#f0efee;}
.bgcolor-2{background:#f9f9f9;}
.bgcolor-3{background:#e8e8e8;}
/*light grey*/
.bgcolor-4{background:#2f3238;color:#fff;}
/*Dark grey*/
.bgcolor-5{background:#df6659;color:#521e18;}
/*pink1*/
.bgcolor-6{background:#2fa8ec;}
/*sky blue*/
.bgcolor-7{background:#d0d6d6;}
/*White tea*/
.bgcolor-8{background:#3d4444;color:#fff;}
/*Dark grey2*/
.bgcolor-9{background:#ef3f52;color:#fff;}
/*pink2*/
.bgcolor-10{background:#64448f;color:#fff;}
/*Violet*/
.bgcolor-11{background:#3755ad;color:#fff;}
/*dark blue*/
.bgcolor-12{background:#3498DB;color:#fff;}
/*light blue*/
.bgcolor-20{background:#494A5F;color:#D5D6E2;}
/* Header */
.zzsc-header{padding:1em 190px 1em;letter-spacing:-1px;text-align:center;}
.zzsc-header h1{color:#535F6F;font-weight:600;font-size:2em;line-height:1;margin-bottom:0;font-family:"Microsoft YaHei","瀹嬩綋","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
.zzsc-header h1 span{font-family:"Microsoft YaHei","瀹嬩綋","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;display:block;font-size:60%;font-weight:400;padding:0.8em 0 0.5em 0;color:#c3c8cd;}
/*nav*/
.zzsc-demo a{color:#fff;text-decoration:none;}
.zzsc-demo{width:100%;padding-bottom:1.2em;}
.zzsc-demo a{display:inline-block;margin:0.5em;padding:0.6em 1em;border:3px solid #fff;font-weight:700;}
.zzsc-demo a:hover{opacity:0.6;}
.zzsc-demo a.current{background:#1d7db1;color:#fff;}
/* Top Navigation Style */
.zzsc-links{position:relative;display:inline-block;white-space:nowrap;font-size:1.5em;text-align:center;}
.zzsc-links::after{position:absolute;top:0;left:50%;margin-left:-1px;width:2px;height:100%;background:#dbdbdb;content:'';-webkit-transform:rotate3d(0,0,1,22.5deg);transform:rotate3d(0,0,1,22.5deg);}
.zzsc-icon{display:inline-block;margin:0.5em;padding:0em 0;width:1.5em;text-decoration:none;}
.zzsc-icon span{display:none;}
.zzsc-icon:before{margin:0 5px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;font-family:'icomoon';line-height:1;speak:none;-webkit-font-smoothing:antialiased;}
/* footer */
.zzsc-footer{width:100%;padding-top:10px;}
.zzsc-small{font-size:0.8em;}
.center{text-align:center;}
/****/
.related{color:#fff;background:#494A5F;text-align:center;font-size:1.25em;padding:0.5em 0;overflow:hidden;}
.related > a{vertical-align:top;width:calc(100% - 20px);max-width:340px;display:inline-block;text-align:center;margin:20px 10px;padding:25px;font-family:"Microsoft YaHei","瀹嬩綋","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
.related a{display:inline-block;text-align:left;margin:20px auto;padding:10px 20px;opacity:0.8;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;-webkit-backface-visibility:hidden;}
.related a:hover,.related a:active{opacity:1;}
.related a img{max-width:100%;opacity:0.8;border-radius:4px;}
.related a:hover img,.related a:active img{opacity:1;}
.related h3{font-family:"Microsoft YaHei",sans-serif;font-size:1.2em}
.related a h3{font-size:0.85em;font-weight:300;margin-top:0.15em;color:#fff;}
/* icomoon */
.icon-zzsc-home-outline:before{content:"\e5000";}
.icon-zzsc-arrow-forward-outline:before{content:"\e5001";}
@media screen and (max-width:1024px){.zzsc-header{padding:2em 10% 2em;}
.zzsc-header h1{font-size:1.4em;}
.zzsc-links{font-size:1.4em}
}
@media screen and (max-width:960px){.zzsc-header{padding:2em 10% 2em;}
.zzsc-header h1{font-size:1.2em;}
.zzsc-links{font-size:1.2em}
.related h3{font-size:1em;}
.related a h3{font-size:0.8em;}
}
@media screen and (max-width:766px){.zzsc-header h1{font-size:1.3em;}
.zzsc-links{font-size:1.3em}
}
@media screen and (max-width:640px){.zzsc-header{padding:2em 10% 2em;}
.zzsc-header h1{font-size:1em;}
.zzsc-links{font-size:1em}
.related h3{font-size:0.8em;}
.related a h3{font-size:0.6em;}
}

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