zoukankan      html  css  js  c++  java
  • 用checkbox模拟的switch开关样式(只兼容chrome,比较适用于移动端)

    转自:http://www.css88.com/archives/5693 愚人码头

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>用checkbox模拟的switch开关样式(只兼容chrome,比较适用于移动端)</title>
    <style>
    .mui-switch {
    52px;
    height: 31px;
    position: relative;
    border: 1px solid #dfdfdf;
    background-color: #fdfdfd;
    box-shadow: #dfdfdf 0 0 0 0 inset;
    border-radius: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background-clip: content-box;
    display: inline-block;
    -webkit-appearance: none;
    user-select: none;
    outline: none; }
    .mui-switch:before {
    content: '';
    29px;
    height: 29px;
    position: absolute;
    top: 0px;
    left: 0;
    border-radius: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
    .mui-switch:checked {
    border-color: #64bd63;
    box-shadow: #64bd63 0 0 0 16px inset;
    background-color: #64bd63; }
    .mui-switch:checked:before {
    left: 21px; }
    .mui-switch.mui-switch-animbg {
    transition: background-color ease 0.4s; }
    .mui-switch.mui-switch-animbg:before {
    transition: left 0.3s; }
    .mui-switch.mui-switch-animbg:checked {
    box-shadow: #dfdfdf 0 0 0 0 inset;
    background-color: #64bd63;
    transition: border-color 0.4s, background-color ease 0.4s; }
    .mui-switch.mui-switch-animbg:checked:before {
    transition: left 0.3s; }
    .mui-switch.mui-switch-anim {
    transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s; }
    .mui-switch.mui-switch-anim:before {
    transition: left 0.3s; }
    .mui-switch.mui-switch-anim:checked {
    box-shadow: #64bd63 0 0 0 16px inset;
    background-color: #64bd63;
    transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s; }
    .mui-switch.mui-switch-anim:checked:before {
    transition: left 0.3s; }
    /*# sourceMappingURL=mui-switch.css.map */</style>
    </head>
    <body>
    <p><label><input class="mui-switch" type="checkbox"> 默认未选中</label></p>
    <p><label><input class="mui-switch" type="checkbox" checked> 默认选中</label></p>
    <p><label><input class="mui-switch mui-switch-animbg" type="checkbox"> 默认未选中,简单的背景过渡效果,加mui-switch-animbg类即可</label></p>
    <p><label><input class="mui-switch mui-switch-animbg" type="checkbox" checked> 默认选中</label></p>
    <p><label><input class="mui-switch mui-switch-anim" type="checkbox"> 默认未选中,过渡效果,加 mui-switch-anim
    类即可</label></p>
    <p><label><input class="mui-switch mui-switch-anim" type="checkbox" checked> 默认选中</label></p>
    </body>
    </html>

  • 相关阅读:
    Redis之数据类型大全
    基于服务的SOA架构
    mybatis_个人总结
    mybatis_开发篇
    mybatis_基础篇
    mybatis_常用标签
    mybatis_映射查询
    solr_架构案例【京东站内搜索】(附程序源代码)
    Solr_全文检索引擎系统
    zabbix监控搭建步骤
  • 原文地址:https://www.cnblogs.com/ruoyuting/p/7771079.html
Copyright © 2011-2022 走看看