利用CSS3实现开关样式

来源：互联网发布：农村精神病知乎编辑：程序博客网时间：2024/05/16 02:36

开关组件

开关组件有开和关两个状态，所以可以使用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>

如果有不对的地方，欢迎大家进行指正。

阅读全文

0 0