css实现逼真质感按钮checkbox开关效果代码-html代码-BFW代码库

css实现逼真质感按钮checkbox开关效果代码

代码语言：html

代码描述：css实现逼真质感按钮checkbox开关效果代码

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

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

<head>
    <meta charset="UTF-8">
<style>
input {
	display:none
}
body {
	background-color:#555;
	background-size:20px 20px;
	color:white;
	font-family:sans-serif;
	font-size:27px
}
.on,.off {
	position:absolute;
	text-align:center;
	-webkit-text-shadow:inset 1px 1px 1px black;
	width:100%
}
.on {
	color:#bbb;
	top:10px;
	-webkit-transition:all .1s;
	font-family:sans-serif
}
.off {
	bottom:5px;
	-webkit-transition:all .1s;
	transform:scaleY(0.85)
}
.but {
	background-color:#272727;
	border-radius:400px 400px 400px 400px / 400px 400px 300px 300px;
	border-bottom-width:0;
	box-shadow:inset 8px 6px 5px -7px rgba(0,0,0,1),inset -8px 6px 5px -7px rgba(0,0,0,1),inset 0 -3px 2px -2px rgba(200,200,200,.5),0 3px 3px -2px rgba(0,0,0,1),inset 0 -230px 60px -200px rgba(255,255,255,.2),inset 0 220px 40px -200px rgba(0,0,0,.3);
	display:block;
	font-size:27px;
	height:178px;
	position:relative;
	-webkit-transition:all .2s;
	width:200px
}
.back {
	background-color:black;
	background-image:-webkit-linear-gradient(0deg,transparent 30%,transparent 70%),-webkit-linear-gradient(0deg,rgba(150,150,150,0) 30%,rgba(150,150,150,.1) 50%,rgba(150,150,150,0) 70%);
	border-radius:105px;
	box-shadow:30px 30px 30px -20px rgba(0,0,0,.3),-30px 30px 30px -20px rgba(0,0,0,.3),0 30px 30px 0 rgba(0,0,0,.3),inset 0 -1px 0 0 #333;
	box-sizing:border-box;
	height:210px;
	padding:4px 4px;
	-webkit-transition:all .2s;
	width:210px
}
.round {
	background:black;
	background:-webkit-linear-gradient(270deg,#444,#222);
	border-radius:130px;
	-webkit-box-sizing:border-box;
	box-shadow:0 0 0 8px rgba(0,0,0,.1),0px 0.........完整代码请登录后点击上方下载按钮下载查看