分享一个H5原生form表单的checkbox特效

原创
2018/02/24 17:10
阅读数 2K

<!DOCTYPE html>
<html>

	<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>

</html>

 

展开阅读全文
打赏
2
8 收藏
分享
加载中
更多评论
打赏
0 评论
8 收藏
2
分享
返回顶部
顶部