div+css实现中性化checkbox开关效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现中性化checkbox开关效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <meta charset="UTF-8"> <style> html,body { font-family: "Lato",sans-serif; background: #666; text-align: center; height: 100% } .container { text-align: center; position: absolute; margin-top: -80px; width: 100%; top: 50% } .toggle { margin: 4px; display: inline-block } .toggle { box-shadow: inset 0 0 35px 5px rgba(0,0,0,0.25),inset 0 2px 1px 1px rgba(255,255,255,0.9),inset 0 -2px 1px 0 rgba(0,0,0,0.25); border-radius: 8px; background: #ccd0d4; position: relative; height: 140px; width: 140px } .toggle:before { box-shadow: 0 0 17.5px 8.75px white; border-radius: 118.3px; background: white; position: absolute; margin-left: -50.4px; margin-top: -50.4px; opacity: .2; content: ""; height: 100.8px; width: 100.8px; left: 50%; top: 50% } .toggle .button { -webkit-filter: blur(1px); -moz-filter: blur(1px); filter: blur(1px); transition: all 300ms cubic-bezier(0.23,1,0.32,1); box-shadow: 0 15px 25px -4px rgba(0,0,0,0.5),inset 0 -3px 4px -1px rgba(0,0,0,0.2),0 -10px 15px -1px rgba(255,255,255,0.6),inset 0 3px 4px -1px rgba(255,255,255,0.2),inset 0 0 5px 1px rgba(255,255,255,0.8),inset 0 20px 30px 0 rgba(255,255,255,0.2); border-radius: 96.32px; position: absolute; background: #ccd0d4; margin-left: -48.16px; margin-top: -48.16px; display: block; height: 96.32px; width: 96.32px; left: 50%; top: 50% } .toggle .label { transition: color 300ms ease-out; text-shadow: 1p.........完整代码请登录后点击上方下载按钮下载查看
网友评论0