利用CSS3实现开关样式

最新推荐文章于 2023-04-23 14:27:54 发布

ma125120

最新推荐文章于 2023-04-23 14:27:54 发布

阅读量702

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/qq_36662470/article/details/78376668

版权

web前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

开关组件

开关组件有开和关两个状态，所以可以使用checkbox元素来实现。只需使用border-radius,checked选择器,CSS3的过渡动画即可制作一个美观的开关按钮。

下图分别为关闭状态的样式和打开状态的样式：
关闭样式

首先，来分析一下这个组件的大概组成部分：分别为底层的圆角矩形框，圆形的指示球。圆角的矩形框的圆角样式就是border-radius的应用，当它的值等于它的高度时，左右的边框就会变成半圆形。当宽高一致，并且设置border-radius为50%时，即可获得一个圆形的元素。

可使用-webkit-appearance: none;来取消checkbox的默认样式，然后我们就可以自由设置checkbox的外观了。点击checkbox后会出现灰色的边框，可以使用outline:none;来取消。

关闭状态
下面的一层只需分别设置宽高，然后设置跟高度一致的border-radius,以及相应的border,background即可。
至于左侧的指示球则需要使用绝对定位来实现，为了让指示球相对于圆角矩形框进行定位，所以要设置checkbox的定位方式为相对定位，这里需要使用after伪元素来实现。
具体代码为：

.switch {
            -webkit-appearance: none;
            outline:none;
            display: inline-flex;
            width:80px;
            height:36px;
            background: #fff;
            border:2px solid #ccc;
            border-left:none;
            border-radius: 36px;
            position: relative;
            transition:all 0.3s ease-out;
    }
    .switch:after {
            content:'';
            position: absolute;
            top:-2px;
            left:0;
            width:36px;
            height: 36px;
            border-radius: 50%;
            background: #fff;
            border:thin solid #bbb;
            box-sizing: border-box;
            transition:all 0.3s ease-out;
            box-shadow: 0 3px 5px #aaa;
    }

2.打开状态

打开状态则可以使用checked选择器来实现，从关闭到打开，主要为背景颜色的变化以及指示球的位置变化。

圆角矩形框的背景颜色可以使用.switch:checked选择器来进行控制，而指示球的位置变化则可以使用translateX属性来进行移动，如果直接设置right:0其实它的位置并不会变化。这是因为在设置了非static的定位方式后，如果同时存在left和right，以left为准，所以right:0并不会生效。使用`transform: translateX(120%); 同样可以使指示球右移。

具体代码实现为：

.switch:checked {
            background: #4CE068;
            transition:all 0.3s ease-out;
}
.switch:checked:after {
            transition:all 0.3s ease-out;
            border:thin solid #4CE068;
            transform: translateX(120%);
}

如果不使用transtion进行过渡，两个状态的切换就会显得很生硬，所以可以使用transtion进行一个过渡动画的设置，我这里为了方便使用了all，其实换成transform性能会更好。

完整的代码如下：

<html>
<head>
    <meta charset="UTF-8">
    <title>开关样式</title>
    <style>
        * {
            margin:0;
            padding:0;
        }
        body {
            margin:80px;
        }
        .switch {
            -webkit-appearance: none;
            outline:none;
            display: inline-flex;
            width:80px;
            height:36px;
            background: #fff;
            border:2px solid #ccc;
            border-left:none;
            border-radius: 36px;
            position: relative;
            transition:all 0.3s ease-out;
        }
        .switch:after {
            content:'';
            position: absolute;
            top:-2px;
            left:0;
            width:36px;
            height: 36px;
            border-radius: 50%;
            background: #fff;
            border:thin solid #bbb;
            box-sizing: border-box;
            transition:all 0.3s ease-out;
            box-shadow: 0 3px 5px #aaa;
        }
        .switch:checked {
            background: #4CE068;
            transition:all 0.3s ease-out;
        }
        .switch:checked:after {
            transition:all 0.3s ease-out;
            border:thin solid #4CE068;
            transform: translateX(120%);
        }
    </style>
</head>
<body>

    <input type="checkbox" class='switch' >

</body>
</html>