css实现创意倾斜checbox胶囊开关效果代码
代码语言:html
所属分类:表单美化
代码描述:css实现创意倾斜checbox胶囊开关效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> input { --s: 40px; /* adjust this to control the size*/ height: var(--s); aspect-ratio: 2.5; width: auto; /* some browsers need this */ border-radius: var(--s); padding: calc(var(--s)/10); margin: calc(var(--s)/2); cursor: pointer; background: radial-gradient(farthest-side,#15202a 96%,#0000) var(--_p,0%)/var(--s) content-box no-repeat, var(--_c,#ff7a7a); box-sizing: content-box; transform-origin: calc(3*var(--s)/5) 50%; trans.........完整代码请登录后点击上方下载按钮下载查看
网友评论0