可拖动的checkbox开关效果代码
代码语言:html
所属分类:表单美化
代码描述:可拖动的checkbox开关效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Dosis:400,500,700&display=swap" rel="stylesheet">
<style>
* {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
html,
body {
height: 100%;
}
body {
background: #2f2f2f;
background: -webkit-gradient(linear, left top, right top, from(#2f2f2f), color-stop(51%, #414141), to(#2f2f2f));
background: linear-gradient(to right, #2f2f2f 0%, #414141 51%, #2f2f2f 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2f2f2f', endColorstr='#2f2f2f',GradientType=1 );
position: relative;
font-family: 'Dosis', sans-serif;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
}
body::before {
content: '';
position: absolute;
right: 0;
top: 0;
bottom: 0;
left: 0;
background: url("https://alikinvv.github.io/skeuomorph-switch/build/noise.png") repeat 0 0;
z-index: 0;
}
.switch {
position: .........完整代码请登录后点击上方下载按钮下载查看
















网友评论0