【CSS练习】如何用 CSS 创作一个立体滑动 toggle 交

知识点

1. JQuery--.toggleClass()
   Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.
   .toggleClass( className )

2. 原生JS实现

function hasClass(obj, cls) {
    return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(obj, cls) {
    if (!this.hasClass(obj, cls)) obj.className += " " + cls;
}

function removeClass(obj, cls) {
    if (hasClass(obj, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        obj.className = obj.className.replace(reg, ' ');
    }
}

function toggleClass(obj,cls){
    if(hasClass(obj,cls)){
        removeClass(obj, cls);
    }else{
        addClass(obj, cls);
    }
}

}

代码

<style type="text/css">
           html, body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            background-color: darkseagreen;
           }
           .outer {
            width: 10em;
            height: 5em;
            background: linear-gradient(silver, whitesmoke);
            border-radius: 2.5em;
            font-size: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
           }
           .inner {
            width: 8em;
            height: 3.5em;
            background: linear-gradient(dimgray, silver);
            border-radius: 2em;
            box-shadow: inset 0 0 1.5em rgba(0, 0, 0, 0.5);
           }
           #toggle {
            width: 3.5em;
            height: 3.5em;
            background: linear-gradient(to top, silver, whitesmoke);
            border-radius: 50%;
            box-shadow: 0 0.4em 0.6em rgba(0, 0,0,.2);
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 0.5s;
            /*left: -30%;*/
           }
           #toggle::before {
            content: '';
            height: 80%;
            width: 80%;
            background: linear-gradient(silver, whitesmoke);
            border-radius: 50%;
            position: absolute;
           }
           #toggle::before {
            content: 'OFF';
            text-align: center;
            line-height: calc(3.5em * 0.8);
            font-family: sans-serif;
            color: gray;
           }
           .inner.active {
            background: linear-gradient(green, limegreen);
           }
           .inner.active #toggle {
            left:57%;
           }
           .inner.active #toggle::before {
            content: 'ON';
            color: limegreen;
           }
        </style>
        <script type="text/javascript">
            function hasClass(obj, cls) {
                return !!obj.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
            }
            function addClass(obj, cls) {
                if (!this.hasClass(obj, cls)) obj.className += " " + cls;
            }
            function removeClass(obj, cls) {
                if (hasClass(obj, cls)) {
                    var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
                    obj.className = obj.className.replace(reg, ' ');
                }
            }

            function toggleClass(obj,cls){
                if(hasClass(obj,cls)){
                    removeClass(obj, cls);
                }else{
                    addClass(obj, cls);
                }
            }
            window.onload = function () {
                document.getElementById("toggle").onclick = function() {
                    var inner = document.getElementsByClassName("inner")[0];
                    toggleClass(inner, "active");

                }
            }

        </script>

参考：https://segmentfault.com/a/1190000014638655