TweenMax渐变开关复选框效果代码-html代码-BFW代码库

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

代码语言：html

代码描述：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"]+label+svg {
	position:absolute;
	left:0;
	top:0
}
input[type="checkbox"]:checked+label {
	opacity:.5
}
#arrow_x_g {
	opacity:0
}
#transCircle {
	opacity:0
}
#x1,#x2,#x3,#x4 {
	stroke-dasharray:21.3;
	stroke-dashoffset:21.3
}
    </style>
</head>

<body>

    <div class="center" style="padding:100px">
        <div class="checkbox__center">
            <div class="checkbox__wrapper"><input id="c" type="checkbox" /><label for="c"></label><svg width="105%" height="65" viewBox="0 0 200 100"><defs><linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:#08d6d6;stop-opacity:1" /><!-- <stop offset="40%" style="stop-color:#18deb9;stop-opacity:1" />--><stop offset="46%" style="stop-color:#52ce94;stop-opacity:1" /><stop offset="56%" style="stop-color:#97b971;stop-opacity:1" /><stop offset="67%" style="stop-color:#ef9429;stop-opacity:1" /><stop offset="100%" style="stop-color:#e76339;stop-opacity:1"/></linearGradient><linearGradient id="text" x1="0%" y1="0%" x2="200%" y2="0%"><stop offset="0%" style="stop-color:#08d6d6;stop-opacity:1" /><stop offset="46%" style="stop-color:#52ce94;stop-opacity:1" /><stop offset="56%" style="stop-color:#97b971;stop-opacity:1" /><stop offset="67%" style="stop-color:#ef9429;stop-opacity:1" /><stop offset="100%" style="stop-color:#e76339;stop-opacity:1"/></linearGradient><linearGradient id="text2" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:#ef9429;stop-opacity:1" /><stop offset="67%" style="stop-color:#ef9429;stop-opacity:1" /><stop offset="100%" style="stop-color:#e76339;stop-opacity:1"/></linearGradient></defs><rect id="bgRect" x="-8" y="0.........完整代码请登录后点击上方下载按钮下载查看