css+div实现模糊checkbox开关效果代码
代码语言:html
所属分类:表单美化
代码描述:css+div实现模糊checkbox开关效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.5.0.css"> <style> *, *::before, *::after { transition: all 0.21s; } main { display: grid; height: 100vh; margin: auto; background: #efebe9; place-items: center; } main .bg { position: absolute; width: 50vmin; aspect-ratio: 1/1; border-radius: 100%; overflow: hidden; } main .bg::before, main .bg::after { content: ''; position: absolute; inset: -10%; display: block; clip-path: circle(50% at 50% 50%); } main .bg::before { background-image: conic-gradient(#fd150a 25%, #fda40a 25%, #fda40a 50%, #de4bfd 50%, #de4bfd 75%, #ff8543 75%, #ff8543 100%, #fd150a 100%); } main .bg::after { opacity: 0; mix-blend-mode: overlay; filter: url("#noiseFilter"); } main .toggle__wrapper { font-size: 2rem; } main input[type='checkbox'] { appearance: none; position: relative; display: grid; width: 2em; aspect-ratio: 2/1; background: #fff; place-items: center; border-radius: 2em; overflow: hidden; } main input[type='checkbox']::before { content: ''; position: absolute; display: block; width: 0.75em; aspect-ratio: 1/1; background: #455a64; border-radius: 2em; color: #f00; transform: tran.........完整代码请登录后点击上方下载按钮下载查看
网友评论0