可拖动的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: relative; z-index: 2; width: 450px; height: 150px; border-radius: 300px; margin-top: 45px; } .switch input { display: none; } .switch label[for="on"] { position: absolute; left: 0; top: 0; width: 50%; height: 150px; border-top-left-radius: 300px; border-bottom-left-radius: 300px; box-shadow: inset 0 0 89px #78ca68, 0 0 4px 2px rgba(120, 202, 104, 0.4); background: url("https://alikinvv.github.io/skeuomorph-switch/build/noise.png") repeat 0 0 #55794e; } .switch label[for="on"]::before { content: ''; position: absolute; top: 76px; left: 60px; height: 8px; width: 100px; background: url(https://alikinvv.github.io/skeuomorph-switch/build/noise2.png) 0 0 #416b3b; border-radius: 100px; box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2); } .switch label[for="on"]::after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2); border-top-left-radius: 300px; border-bottom-left-radius: 300px; z-index: 1; box-shadow: inset -1px 8px 20px rgba(0, 0, 0, 0.5); } .switch label[for="off"] { position: absolute; right: 0; top: 0; width: 50%; height: 150px; border-top-right-radius: 300px; border-bottom-right-radius: 300px; box-shadow: inset 0 0 89px #251818, 0 0 4px 2px rgba(60, 40, 39, 0.4); background: #3c2827; } .switch label[for="off"]::before { content: ''; position: absolute; top: 76px; left: 60px; height: 8px; width: 100px; background: #251818; border-radius: 100px; box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2); } .switch label[for="off"]::after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2); border-top-right-radius: 300px; border-bottom-right-radius: 300px; z-index: 1; box-shadow: inset -1px 8px 20px rgba(0, 0, 0, 0.5); } .bar { position: absolute; right: 0; top: -3px; height: 156px; width: 350px; border-radius: 300px; background: #323232; background: -webkit-gradient(linear, left top, left bottom, from(#323232), to(#121212)); background: linear-gradient(to bottom, #323232 0%, #121212 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#323232', endColorstr='#121212',GradientType=0 ); box-shadow: inset 0 -5px 70px 0 rgba(0, 0, 0, 0.8), 0 0 0 2px rgba(128, 128, 128, 0.2), -3px 6px 15px 0px rgba(0, 0, 0, 0.4); overflow: hidden; cursor: -webkit-grab; cursor: grab; z-index: 2; } .bar:active { cursor: -webkit-grabbing; cursor: grabbing; } .bar::before { content: ''; position: absolute; right: 0; top: 0; bottom: 0; left: 0; border-radius: 300px; } .bar .on { position: absolute; top: 50%; right: 55px; height: 30px; width: 5px; background: #3a3939; -webkit-transform: translateY(-50%); transform: translateY(-50%); box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.3); border-radius: 10px; } .bar .off { position: absolute; top: 50%; left: 55px; height: 30px; width: 30px; border-radius: 50%; background: #3a3939; -webkit-transform: translateY(-50%); transform: translateY(-50%); border-top: 3px solid #212121; border-bottom: 2px solid #403f3f; box-shadow: inset 0 0 27px rgba(0, 0, 0, 0.4), inset 0px -11px 4px -10px rgba(255, 255, 255, 0.2), inset 0px 13px 4px -10px rgba(0, 0, 0, 0.2); } .shadow0 { top: 3px; left: 0; right: 0; height: 6px; background: #fff; border-radius: 50%; -webkit-filter: blur(20px); filter: blur(5px); opacity: .19; z-index: 1; } .shadow1 { position: absolute; top: 18px; left: 60px; right: 60px; height: 7px; background: #000; border-radius: 50px; -webkit-filter: blur(14px); filter: blur(14px); opacity: 0.7; } .shadow2 { position: absolute; top: 38px; left: 50px; right: 50px; height: 10px; background: #fff; border-radius: 50%; -webkit-filter: blur(20px); filter: blur(20px); opacity: 0.2; } .shadow3 { position: absolute; bottom: 18px; left: 30px; right: 30px; height: 10px; background: #000; border-radius: 50px; -webkit-filter: blur(14px); filter: blur(14px); opacity: 1; } .text-on { position: absolute; right: 40px; top: -100px; font-size: 30px; color: #989696; z-index: 1; } .text-on-bar { position: absolute; top: -55px; right: 53px; -webkit-transform: translateX(-50%); transform: translateX(-50%); height: 40px; width: 4px; border-radius: 10px; background: #303030; box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); z-index: 1; } .text-off { position: absolute; left: 40px; top: -100px; font-size: 30px; color: #989696; z-index: 1; } .text-off-bar { position: absolute; top: -55px; left: 63px; -webkit-transform: translateX(-50%); transform: translateX(-50%); height: 40px; width: 4px; border-radius: 10px; background: #30.........完整代码请登录后点击上方下载按钮下载查看
网友评论0