分享一個H5原生form表單的checkbox特效

smallwei發表於2018-03-18
H5ORM特效

分享一個H5原生form表單的checkbox特效

<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		.md-checkbox {
			margin: 50px;
			position: relative;
			height: auto;
			font-size: 14px;
		}
		.md-checkbox label>span.inc {
			-webkit-animation: growCircle 0.2s ease;
			-moz-animation: growCircle 0.2s ease;
			animation: growCircle 0.2s ease;
		}
		
		@keyframes growCircle {
			0%,
			100% {
				transform: scale(0);
				opacity: 0.8;
			}
			70% {
				background: #eee;
				transform: scale(1.25);
			}
		}
		
		.md-checkbox label>span.inc {
			background: #fff;
			left: -20px;
			top: -20px;
			height: 60px;
			width: 60px;
			opacity: 0;
			border-radius: 50% !important;
			-moz-border-radius: 50% !important;
			-webkit-border-radius: 50% !important;
		}
		
		.md-checkbox input[type=checkbox] {
			visibility: hidden;
			position: absolute;
		}
		
		.md-checkbox label {
			cursor: pointer;
			padding-left: 30px;
		}
		
		.md-checkbox label>span {
			display: block;
			position: absolute;
			left: 0;
			-webkit-transition-duration: 0.2s;
			-moz-transition-duration: 0.2s;
			transition-duration: 0.2s;
		}
		
		.md-checkbox label>.check {
			top: -4px;
			left: 6px;
			width: 10px;
			height: 20px;
			border: 2px solid #26A69A;
			border-top: none;
			border-left: none;
			opacity: 0;
			z-index: 5;
			-webkit-transform: rotate(180deg);
			-moz-transform: rotate(180deg);
			transform: rotate(180deg);
			-webkit-transition-delay: 0.2s;
			-moz-transition-delay: 0.2s;
			transition-delay: 0.2s;
		}
		
		.md-checkbox input[type=checkbox]:checked~label>.check {
			opacity: 1;
			-webkit-transform: scale(1) rotate(45deg);
			-moz-transform: scale(1) rotate(45deg);
			transform: scale(1) rotate(45deg);
		}
		
		.md-checkbox input[type=checkbox]:checked~label>.box {
			opacity: 0;
			-webkit-transform: scale(0) rotate(-180deg);
			-moz-transform: scale(0) rotate(-180deg);
			transform: scale(0) rotate(-180deg);
		}
		
		.md-checkbox label>.box {
			top: 0px;
			border: 2px solid #666;
			height: 20px;
			width: 20px;
			z-index: 5;
			-webkit-transition-delay: 0.2s;
			-moz-transition-delay: 0.2s;
			transition-delay: 0.2s;
		}
	</style>
</head>

<body>
	<div class="md-checkbox">
		<input type="checkbox" id="test" class="md-check" />
		<label for="test">
			<span></span>
            <span class="check"></span>
            <span class="box"></span>
            Option 1 
		</label>
	</div>
	<script>
		var list = document.getElementsByTagName('input');
		for(var i =0;i<list.length;i++){
			(function(n){
				list[n].addEventListener('click',function(e){
					var inc = this.nextElementSibling.firstElementChild;
					inc.className  = '';
					setTimeout(function(){
						inc.className  = 'inc';
					},0);
				})
			})(i)
		}
	</script>
</body>
複製程式碼

相關文章