div+css实现蓝色立体checkbox开关效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现蓝色立体checkbox开关效果代码
代码标签: div css 蓝色 立体 checkbox 开关
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --sz: 10vmin; --c1: #e7fbfe; --c2: #06a9c1; --c3: #018fe9; --tr: all 0.5s ease 0s; --clr: 1; /* change color from 1 to 12 */ --hue: calc(30deg - (30deg * var(--clr))); } * { box-sizing: border-box; transition: var(--tr); } body { margin: 0; padding: 0; width: 100vw; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; } .content { filter: hue-rotate(var(--hue)); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 20%, #fff 0%, #fff8 10%, #fff0 40%), radial-gradient(circle at 50% 30%, var(--c1) 0%, #fff0 85%), radial-gradient(circle at 50% 25%, var(--c1) 0%, var(--c2) 85%); } .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[for=btn] { position: absolute; width: calc(var(--sz) * 4); height: calc(var(--sz) * 2); background: #49ddf8; border-radius: var( --sz); box-shadow: 0 calc(var(--sz) / 20) calc(var(--sz) / 10) 0 var(--c3) inset, 0 calc(var(--sz) / 5) calc(var(--sz) / 2) calc(var(--sz) / -10) var(--c1) inset, 0 calc(var(--sz) / 25) calc(var(--sz) / 20) 0 #fffc, 0 calc(var(--sz) / -50) calc(var(--sz) / 20) 0 #0003; } .thumb { position: absolute; width: calc(calc(var(--sz)* 2) - calc(var(--sz) / 8)); height: calc(calc(var(--sz)* 2) - calc(var(--sz) / 8)); top: calc(calc(var(--sz) / 10) + calc(var(--sz) / -20)); left: calc(calc(var(--sz) / 10) + calc(var(--sz) / -30)); background: conic-gradient(from -45deg, var(--c1) 0 90deg, var(--c2), var(--c1)); border-radius: var(--sz); box-shadow: 0 calc(var(--sz) / 50) calc(var(--sz) / 30) calc(var(--sz) / 80) var(--c3); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 1; } #btn:checked + label .thumb { --lg: var(--on); transition: var(--tr); left: calc(calc(100% - calc(calc(var(--sz) * 2) - calc(var(--sz) / 3))) - calc(calc( var(--sz) / 10) + calc(var(--sz) / 5.75))); } .thumb:before { content: ""; position: absolute; width: calc(var(--sz) / 0.7); height: calc(var(--sz) / 0.7); background: #b7eef7; border-radius: 100%; box-shadow: 0 0 calc(var(--sz) / 50) 0 #fff, 0 0 calc(var(--sz) / 50) 0 #fff inse.........完整代码请登录后点击上方下载按钮下载查看
网友评论0