TweenMax渐变开关复选框效果代码

代码语言:html

所属分类:表单美化

代码描述:TweenMax渐变开关复选框效果代码

代码标签: TweenMax 复选框 渐变

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);
	* {
	box-sizing:border-box
}
html {
	font-family:Open Sans,serif;
	text-align:center
}
a {
	text-decoration:none
}
h1 {
	max-width:500px;
	font-size:24px;
	color:white;
	margin:20px auto 10px auto
}
h1 a {
	font-weight:600
}
h2 {
	margin-top:0;
	font-size:34px;
	font-weight:600;
	color:white
}
p {
	margin:10px 0 30px 0;
	color:white
}
p.last {
	margin-top:10px;
	margin-bottom:15px
}
body,html {
	background-color:#24282c
}
.checkbox__center {
	display:inline-block;
	margin:0 auto
}
.checkbox__wrapper {
	width:138px;
	height:65px;
	-moz-border-radius:65px;
	-webkit-border-radius:65px;
	border-radius:65px;
	overflow:hidden;
	position:relative;
	border:2px solid #10393e
}
input[type="checkbox"] {
	display:none
}
input[type="checkbox"]+label {
	display:inline-block;
	width:100%;
	height:100%;
	-moz-border-radius:65px;
	-webkit-border-radius:65px;
	border-radius:65px;
	overflow:hidden;
	position:relative;
	z-index:1;
	cursor:pointer
}
input[type="checkbox"]+la.........完整代码请登录后点击上方下载按钮下载查看

网友评论0