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' gradientTransform='rotate(0)'%3E %3Cstop offset='0%25' stop-color='rgb(190,190,190)'%3E%3C/stop%3E %3Cstop offset='100%25' stop-color='rgb(190,190,190)'%3E%3C/stop%3E %3C/linearGradient%3E %3Cfilter id='filter-lcf364utk'%3E %3CfeTurbulence baseFrequency='0.1' numOctaves='9' seed='444'%3E%3C/feTurbulence%3E%3CfeColorMatrix class='anim' type='hueRotate' values='0'%3E%3Canimate attributeName='values' from='0' to='360' dur='8s' repeatCount='indefinite'%3E%3C/animate%3E%3C/feColorMatrix%3E %3CfeColorMatrix values='4.7 5 -4.8 2.2 4.8 -0.3 -2.5 1.9 -0.1 0.9 -4.2 2.7 -1.4 4.1 2 -3.9 2 4.3 -0.4 -0.4'%3E%3C/feColorMatrix%3E%3CfeSpecularLighting result='specOut' specu.........完整代码请登录后点击上方下载按钮下载查看