div+css实现立体checkbox开关效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现立体checkbox开关效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; margin: 0; min-height: 100vh; font-size: 4rem; background: linear-gradient(135deg, #f0f0f5, #ccd); gap: 0.5em; } .toggle { --color: chartreuse; appearance: none; position: relative; font-size: 1em; width: 2.5em; aspect-ratio: 2.5; border-radius: 100vmax; box-shadow: inset 0 0.2em 0.2em -0.1em #1233, inset 0 -0.2em 0.2em -0.1em #fff, inset 0 0 0 0.2em #f0f0f5, inset 0 0em 0.05em 0.2em #000c, inset 0.05em 0.1em 0.1em 0.1em #0008; ; background: linear-gradient(#0000, #fff4 20%, #0005 80%), linear-gradient(90deg, var(--color) 50%, #eee 0); &::before, &::after { content: ""; position: absolute; left: 32%; top: 50%; transform: translate(-50%, -50%); border-radius: 100vmax; width: 58%; height: 85%; box-shadow: 0 0 0.075em #1234, 0.05em 0.1em 0.1em #2247; background: linear-gradient(135deg, #f0f0f5, #ccd); transition: left 0.5s; border: 1px solid #0000; box-sizing: border-box; } &::after { -webkit-mask: radial-gradient(farthest-side, #000 85%, #0000 0) 0 0 / 50% 100%; background: linear-gradient(to bottom right, #d2d9e1 20%, #f4f5f7 80%) 0 0 / 50% 100% no-repeat, linear-gradient(to bottom right, #bbc, #f0f0f5 80%) 100% 0 / 50% 100% no-repeat; } &:checked { &::before, &::after { left: 68%; } } &.........完整代码请登录后点击上方下载按钮下载查看
网友评论0