zoukankan      html  css  js  c++  java
  • Css仿ios的开关按钮

    Css代码如下

            .al-toggle-button{
                appearance: none;
                -webkit-appearance: none;
                position: relative;
                 52px;
                height: 32px;
                background: #dfdfdf;
                border-radius: 16px;
                border: 1px solid #dfdfdf;
                outline: 0;
                box-sizing: border-box;
            }
            .al-toggle-button:checked{
                border-color: #04be02;
                background-color: #04be02;
            }
            .al-toggle-button:before, .al-toggle-button:after{
                content: " ";
                position: absolute;
                top: 0;
                left: 0;
                height: 30px;
                border-radius: 15px;
                transition: transform 0.3s;
                transition: -webkit-transform 0.3s;
                transition: transform 0.3s, -webkit-transform 0.3s;
                -webkit-transition: -webkit-transform 0.3s;
            }
            .al-toggle-button:before{
                 50px;
                background-color: #fdfdfd;
            }
            .al-toggle-button:after{
                 30px;
                background-color: white;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
            }
            .al-toggle-button:checked:before{
                transform: scale(0);
                -webkit-transform: scale(0);
            }
            .al-toggle-button:checked:after{
                transform: translateX(20px);
                -webkit-transform: translateX(20px);
            }

    HTML中引用

    <input type="checkbox" class="al-toggle-button">

    效果图~~
    关闭状态
    这里写图片描述

  • 相关阅读:
    flash 异性窗体
    ASCⅡ 表 关键字符
    VC 中显示位图的步骤
    输出电脑的所有Mac地址
    const char* 和 char* const
    C# 生成PDF
    vc6显示行号
    纪念一下。
    MII接口全家福
    Virtex6 GTX设计总结:预加重、均衡、输出振幅的值
  • 原文地址:https://www.cnblogs.com/xiaoaojiao/p/6115758.html
Copyright © 2011-2022 走看看