css实现蠕虫开关checkbox效果代码-html代码-BFW代码库

css实现蠕虫开关checkbox效果代码

代码语言：html

代码描述：css实现蠕虫开关checkbox效果代码

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

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

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


  
  
  
  
<style>
:root {
	--sz: 10vmin;
	--sz1: calc(var(--sz) / 10);
	--on: #269fe5; 
	--no: #ff4444;
	--bg: #212121;
	--tr: all 0.5s ease 0s;
}	

@property --deg {
	syntax: '<angle>';
	inherits: false;
	initial-value: 180deg;
}

* {
	box-sizing: border-box;
}	

body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(var(--bg), #222);
}

.toggle {
	position: relative;
	width: calc(var(--sz) * 4);
	height: calc(var(--sz) * 2);
	display: flex;
	align-items: center;
	justify-content: center;
}

input {
	display: none;
}

label {
	--deg: 180deg;
	position: absolute;
	width: calc(var(--sz)* 4);
	height: calc(var(--sz)* 2);
	background: 
		conic-gradient(from 0deg at 50% 50%, #fff0 0 var(--deg), var(--no) 0 100%),
		conic-gradient(from calc(var(--deg) + 0deg) at 50% 50%, var(--on) 0 50%, #fff0 0 100%),
		#272727;
	border-radius: var(--sz);
	pointer-events: none;
	transition: var(--tr);
	transition-property: --deg;
	animation: start-worm 2s ease 0s 1;
}

@keyframes start-worm {
	0%, 75% { --deg: 360deg; }
}	

#btn:checked + label {
	--deg: 360deg;
}

label:before {
	content: "";
	position: absolute;
	width: calc(var(--sz) * 1);
	height: calc((var(--sz) * 2) + 2px);
	left: calc(var(--sz1) * 15);
	top: -1px;
	transition: var(--tr);
	--bg1: radial-gradient(circle at calc(0% - 2px) 50%, #fff0 calc(var(--sz1) * 2), var(--bg) calc(calc(var(--sz1) * 2) + 1px) 100%);
	--bg2: radial-gradient(circle at calc(100% + 2px) 50%, #fff0 calc(var(--sz1) * 2), var(--bg) calc(calc(var(--sz1) * 2) + 1px) 100%);
	background: var(--bg1), var(--bg1),	var.........完整代码请登录后点击上方下载按钮下载查看