css白天夜晚开关切换checkbox按钮效果代码
代码语言:html
所属分类:表单美化
代码描述:css白天夜晚开关切换checkbox按钮效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href='https://fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet' type='text/css'> <style> body { background-color:#1E314F; font-family:"Helvetica Rounded","Arial Rounded MT Bold","Montserrat",sans-serif; color:#fff } .toggleWrapper { position:absolute; top:50%; left:50%; overflow:hidden; padding:0 200px; transform:translate3d(-50%,-50%,0) } .toggleWrapper input { position:absolute; left:-99em } .toggle { cursor:pointer; display:inline-block; position:relative; width:90px; height:50px; background-color:#83D8FF; border-radius:84px; transition:background-color 200ms cubic-bezier(0.445,0.05,0.55,0.95) } .toggle:before { content:"AM"; position:absolute; left:-50px; top:15px; font-size:18px } .toggle:after { content:"PM"; position:absolute; right:-48px; top:15px; font-size:18px; color:#749ED7 } .toggle__handler { display:inline-block; position:relative; z-index:1; top:3px; left:3px; width:44px; height:44px; background-color:#FFCF96; border-radius:50px; box-shadow:0 2px 6px rgba(0,0,0,0.3); transition:all 400ms cubic-bezier(0.68,-0.55,0.265,1.55); transform:rotate(-45deg) } .toggle__handler .crater { position:absolute; background-color:#E8CDA5; opacity:0; transition:opacity 200ms ease-in-out; border-radius:100% } .toggle__handler .crater--1 { top:18px; left:10px; width:4px; height:4px } .toggle__handler .crater--2 { top:28px; left:22px; width:6px; height:6px } .toggle__handler .crater--3 { top:10px; left:25px; width:8px; height:8px } .star { position:absolute; background-color:#fff; transition:all 300ms cubic-bezier(0.445,0.05,0.55,0.95); border-radius:50% } .star--1 { top:10px; left:35px; z-index:0; width:30px; height:3px } .star--2 { top:18px; left:28px; z-index:1; width:30px; height:3px } .star--3 { top:27px; left:40px; z-inde.........完整代码请登录后点击上方下载按钮下载查看
网友评论0