css+svg实现4款开关checkbox美化效果代码-html代码-BFW代码库

代码语言：html

代码描述：css+svg实现4款开关checkbox美化效果代码

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

<!doctype html>
<html>

<head>
    <meta charset="utf-8">

    <style>
        body{background:#000;margin:0;padding:0;}
        
        
        .wrapper{
        	display: -webkit-box;
        	display: -ms-flexbox;
        	display: flex;
        	width: 400px;
        	margin: 40vh auto 0;
        	-ms-flex-wrap: wrap;
        	    flex-wrap: wrap;
        	-webkit-transform: translateY(-50%);
        	        transform: translateY(-50%);
        }
        
        .switch_box{
        	display: -webkit-box;
        	display: -ms-flexbox;
        	display: flex;
        	max-width: 200px;
        	min-width: 200px;
        	height: 200px;
        	-webkit-box-pack: center;
        	    -ms-flex-pack: center;
        	        justify-content: center;
        	-webkit-box-align: center;
        	    -ms-flex-align: center;
        	        align-items: center;
        	-webkit-box-flex: 1;
        	    -ms-flex: 1;
        	        flex: 1;
        }
        
        /* Switch 1 Specific Styles Start */
        
        .box_1{
        	background: #eee;
        }
        
        input[type="checkbox"].switch_1{
        	font-size: 30px;
        	-webkit-appearance: none;
        	   -moz-appearance: none;
        	        appearance: none;
        	width: 3.5em;
        	height: 1.5em;
        	background: #ddd;
        	border-radius: 3em;
        	position: relative;
        	cursor: pointer;
        	outline: none;
        	-webkit-transition: all .2s ease-in-out;
        	transition: all .2s ease-in-out;
          }
          
          input[type="checkbox"].switch_1:checked{
        	background: #0ebeff;
          }
          
          input[type="checkbox"].switch_1:after{
        	position: absolute;
        	content: "";
        	width: 1.5em;
        	height: 1.5em;
        	border-radius: 50%;
        	background: #fff;
        	-webkit-box-shadow: 0 0 .25em rgba(0,0,0,.3);
        	        box-shadow: 0 0 .25em rgba(0,0,0,.3);
        	-webkit-transform: scale(.7);
        	        transform: scale(.7);
        	left: 0;
        	-webkit-transition: all .2s ease-in-out;
        	transition: all .2s ease-in-out;
          }
          
          input[type="checkbox"].switch_1:checked:after{
        	left: calc(100% - 1.5em);
          }
        	
        /* Switch 1 Specific Style End */
        
        
        /* Switch 2 Specific Style Start */
        
        .box_2{
        	background: #666;
        }
        
        input[type="checkbox"].switch_2{
          -webkit-appearance: none;
             -moz-appearance: none;
                  appearance: none;
          width: 100px;
          height: 8px;
          background: #444;
          border-radius: 5px;
          position: relative;
          outline: 0;
          cursor: pointer;
        }
        
        input[type="checkbox"].switch_2:before,
        input[type="checkbox"].switch_2:after{
          position: absolute;
          content: "";
          -webkit-transition: all .25s;
          transition: all .25s;
        }
        
        input[type="checkbox"].switch_2:before{
          width: 40px;
          height: 40px;
          background: #ccc;
          border: 5px solid #666;
          border-radius: 50%;
          top: 50%;
          left: 0;
          -webkit-transform: translateY(-50%);
                  transform: translateY(-50%);
        }
        
        input[type="checkbox"].switch_2:after{
          width: 30px;
          height: 30px;
          background: #666;
          border-radius: 50%;
          top: 50%;
          left: 10px;
          -webkit-transform: scale(1) translateY(-50%);
                  transform: scale(1) translateY(-50%);
          -webkit-transform-origin: 50% 50%;
                  transform-origin: 50% 50%;
        }
        
        input[type="checkbox"].switch_2:checked:before{
          left: calc(100% - 35px);
        }
        
        input[type="checkbox"].switch_2:checked:after{
          left: 75px;
          -webkit-transform: scale(0);
                  transform: scale(0);
        }
        
        /* Switch 2 Specific Style End */
        
        	
        /* Switch 3 Specific Style Start */
        
        .box_3{
        	background: #19232b;
        }
        
        .toggle_switch{
          width: 100px;
          height: 45px;
          position: relative;
        }
        
        input[type="checkbox"].switch_3{
          -webkit-appearance: none;
             -moz-appearance: none;
                  appearance: none;
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 100%;
          cursor: pointer;
          outline: 0;
          z-index: 1;
        }
        
        svg.checkbox .outer-ring{
          stroke-dasharray: 375;
          stroke-dashoffset: 375;
          -webkit-animation: resetRing .35s ease-in-out forwards;
                  animation: resetRing .35s ease-in-out forwards;
        }
        
        input[type="checkbox"].switch_3:checked + svg.checkbox .outer-ring{
          -webkit-animation: animateRing .35s ease-in-out forwards;
                  animation: animateRing .35s ease-in-out forwards;
        }
        
        input[type="checkbox"].switch_3:checked + svg.checkbox .is_checked{
          opacity: 1;
          -webkit-transform: translateX(0) rotate(0deg);
                  transform: translateX(0) rotate(0deg);
        }
        
        input[type="checkbox"].switch_3:checked + svg.checkbox .is_unchecked{
          opacity: 0;
          -webkit-transform: translateX(-200%) rotate(180deg);
                  transform: translateX(-200%) rotate(180deg);
        }
        
        
        svg.checkbox{
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
        
        svg.checkbox .is_checked{
          opacity: 0;
          fill: yellow;
          -webkit-transform-origin: 50% 50%;
                  transform-origin: 50% 50%;
          -webkit-transform: translateX(200%) rotate(45deg);
                  transform: translateX(200%) rotate(45deg);
          -webkit-transition: all .35s;
          transition: all .35s;
        }
        
        svg.checkbox .is_unchecked{
          opacity: 1;
          fill: #fff;
          -webkit-transform-orig.........完整代码请登录后点击上方下载按钮下载查看