css+svg美化checkbox变成有背景动画的胶囊开关效果代码-html代码-BFW代码库

css+svg美化checkbox变成有背景动画的胶囊开关效果代码

代码语言：html

代码描述：使用css代码结合svg对checkbox进行美化，使其变成有背景动画的胶囊开关效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        input {
        	appearance: none;
        	border: 0;
        	display: block;
        	width: 75px;
        	padding: 0;
        	margin: 0;
        	height: 41px;
        	background-color: #fff;
        	box-shadow: 0px 1px 1px rgba(10, 19, 39, 0.1),
        		0px 4px 12px rgba(10, 19, 39, 0.03), 0px 4px 20px rgba(10, 19, 39, 0.04);
        	border-radius: 20px;
        	cursor:pointer;
        }
        .center {
        	position: absolute;
        	top: 50%;
        	left: 50%;
        	transform: translate(-50%, -50%);
        }
        .knob {
        	position: absolute;
        	left: 2px;
        	top: 4px;
        	z-index: 1;
        	width: 33px;
        	height: 33px;
        	border-radius: 50%;
        	background-color: #fff;
        	box-shadow: 0px 4px 20px rgba(10, 19, 39, 0.03),
        		0px 4px 12px rgba(10, 19, 39, 0.06), 0px 1px 1px rgba(10, 19, 39, 0.1);
        	transition: 0.65s cubic-bezier(0.44, 0.13, 0.11, 1.14);
        	user-select:none;
        	pointer-events:none;
        }
        .toggle:checked ~ .knob {
        	left:calc(100% - 35px);
        }
        .svg{
        	position:absolute;
        	top:0%;
        	border-radius:20px;
        	display: block;
        	width: 75px;
        	padding: 0;
        	margin: 0;
        	height: 41px;
        	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='gradient-lcf364utk&.........完整代码请登录后点击上方下载按钮下载查看