css白天夜晚开关切换checkbox按钮效果代码

代码语言:html

所属分类:表单美化

代码描述:css白天夜晚开关切换checkbox按钮效果代码

代码标签: 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