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;
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0