css实现立体质感checkbox开关效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现立体质感checkbox开关效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"><head> <meta charset="UTF-8"> <style> :root { --sz: 10vmin; --szm: calc(var(--sz) / 10); --tr: all 0.5s ease 0s; --on: #2196f3; --lg: #fff0; --bg1: #ededed; --bg2: #e3e3e3; --bg3: #bdbdbd; } * { 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; background: linear-gradient(135deg, var(--bg1), var(--bg2), var(--bg3)); } body:before, body:after, label span:after { content: ""; position: absolute; width: 100%; height: 100%; background: repeating-conic-gradient(#fff 0.00095%, #fff0 .0005%, #fff0 .005%, #fff0 .0005%), repeating-conic-gradient(#fff 0.0.........完整代码请登录后点击上方下载按钮下载查看
网友评论0