css布局实现多色物理拨杆checkbox效果代码
代码语言:html
所属分类:表单美化
代码描述:css布局实现多色物理拨杆checkbox效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <style> input[type=checkbox].oval { visibility: hidden; } label.toggler { width: 85px; height: 35px; position: relative; display: block; border-radius: 25px; box-shadow: 8px 2px 8px rgba(0,0,0,0.7) inset, -7px 1px 8px rgba(0,0,0,0.7) inset; left: 0; top: 0; background: #7A7A7A; z-index: 50; font: bold 12px Arial; cursor: pointer; } label.toggler::before { text-shadow: 0 -2px 1px #8a8a8a; content: 'OFF'; position: absolute; color: white; top: 10px; left: 64%; } label.toggler::after { content: ''; display: block; width: 40px; height: 40px; border-radius: 40px; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; box-shadow: 0 5px 10px rgba(0,0,0,.5), 2px -5px 5px rgba(0,0,0,.2) inset; position: absolute; top: -5px; left: 0px; background: rgb(255,255,255); background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(224,224,224,1) 37%, rgba(186,186,186,1) 38%, rgba(244,244,244,1) 48%, rgba(252,252,252,1) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(37%,rgba(224,224,224,1)), color-stop(38%,rgba(186,186,186,1)), color-stop(48%,rgba(244,244,244,1)), color-stop(100%,rgba(252,252,252,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(224,224,224,1) 37%,rgba(186,186,186,1) 38%,rgba(244,244,244,1) 48%,rgba(252,252,252,1) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(224,224,224,1) 37%,rgba(186,186,186,1) 38%,rgba(244,244,244,1) 48%,rgba(252,252,252,1) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(224,224,224,1) 37%,rgba(186,186,186,1) 38%,rgba(244,244,244,1) 48%,rgba(252,252,252,1) 100%); background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(224,224,224,1) 37%,rgba(186,186,186,1) 3.........完整代码请登录后点击上方下载按钮下载查看
网友评论0