知识点
CSS content属性 attr()
attr(attribute) | 将元素的 attribute 属性以字符串形式返回。 |
HTML
<input class="bs_switch" type="checkbox" data-on="开启" data-off="关闭" checked="">
CSS
.bs_switch {
width: 46px;
height: 22px;
box-sizing: border-box;
position: relative;
background: #cccccc;
border: 1px solid #dfdfdf;
border-radius: 16px;
line-height: 20.5px;
text-align: center;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
}
.bs_switch:active,
.bs_switch:visited {
outline: none;
}
.bs_switch:before {
content: attr(data-off);
position: absolute;
top: 0;
left: 1px;
padding-left: 13px;
border-radius: 15px;
background-color: #cccccc;
color: #fff;
font-size: 12px;
}
.bs_switch:after {
content: " ";
position: absolute;
top: 4px;
left: 2px;
width: 12px;
height: 12px;
border-radius: 15px;
background-color: #ffffff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
transition: transform 0.3s;
}
.bs_switch:checked {
border-color: #0c66ff;
background-color: #0c66ff;
}
.bs_switch:checked:after {
transform: translateX(28px);
}
.bs_switch:checked:before {
content: attr(data-on);
padding-left: 0px;
padding-left: 2px;
background-color: #0c66ff;
color: #fff;
width: 24px;
}
CSS3开关样式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯CSS3开关样式的自定义单选框DEMO演示</title>
<style>
body {
background: #000;
margin: 0;
padding: 0;
}
.wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 400px;
margin: 40vh auto 0;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.switch_box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-width: 200px;
min-width: 200px;
height: 200px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
/* Switch 1 Specific Styles Start */
.box_1 {
background: #eee;
}
input[type="checkbox"].switch_1 {
font-size: 30px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 3.5em;
height: 1.5em;
background: #ddd;
border-radius: 3em;
position: relative;
cursor: pointer;
outline: none;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
input[type="checkbox"].switch_1:checked {
background: #0ebeff;
}
input[type="checkbox"].switch_1:after {
position: absolute;
content: "";
width: 1.5em;
height: 1.5em;
border-radius: 50%;
background: #fff;
-webkit-box-shadow: 0 0 .25em rgba(0, 0, 0, .3);
box-shadow: 0 0 .25em rgba(0, 0, 0, .3);
-webkit-transform: scale(.7);
transform: scale(.7);
left: 0;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
input[type="checkbox"].switch_1:checked:after {
left: calc(100% - 1.5em);
}
/* Switch 1 Specific Style End */
/* Switch 2 Specific Style Start */
.box_2 {
background: #666;
}
input[type="checkbox"].switch_2 {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100px;
height: 8px;
background: #444;
border-radius: 5px;
position: relative;
outline: 0;
cursor: pointer;
}
input[type="checkbox"].switch_2:before,
input[type="checkbox"].switch_2:after {
position: absolute;
content: "";
-webkit-transition: all .25s;
transition: all .25s;
}
input[type="checkbox"].switch_2:before {
width: 40px;
height: 40px;
background: #ccc;
border: 5px solid #666;
border-radius: 50%;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
input[type="checkbox"].switch_2:after {
width: 30px;
height: 30px;
background: #666;
border-radius: 50%;
top: 50%;
left: 10px;
-webkit-transform: scale(1) translateY(-50%);
transform: scale(1) translateY(-50%);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
input[type="checkbox"].switch_2:checked:before {
left: calc(100% - 35px);
}
input[type="checkbox"].switch_2:checked:after {
left: 75px;
-webkit-transform: scale(0);
transform: scale(0);
}
/* Switch 2 Specific Style End */
/* Switch 3 Specific Style Start */
.box_3 {
background: #19232b;
}
.toggle_switch {
width: 100px;
height: 45px;
position: relative;
}
input[type="checkbox"].switch_3 {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
outline: 0;
z-index: 1;
}
svg.checkbox .outer-ring {
stroke-dasharray: 375;
stroke-dashoffset: 375;
-webkit-animation: resetRing .35s ease-in-out forwards;
animation: resetRing .35s ease-in-out forwards;
}
input[type="checkbox"].switch_3:checked+svg.checkbox .outer-ring {
-webkit-animation: animateRing .35s ease-in-out forwards;
animation: animateRing .35s ease-in-out forwards;
}
input[type="checkbox"].switch_3:checked+svg.checkbox .is_checked {
opacity: 1;
-webkit-transform: translateX(0) rotate(0deg);
transform: translateX(0) rotate(0deg);
}
input[type="checkbox"].switch_3:checked+svg.checkbox .is_unchecked {
opacity: 0;
-webkit-transform: translateX(-200%) rotate(180deg);
transform: translateX(-200%) rotate(180deg);
}
svg.checkbox {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
svg.checkbox .is_checked {
opacity: 0;
fill: yellow;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: translateX(200%) rotate(45deg);
transform: translateX(200%) rotate(45deg);
-webkit-transition: all .35s;
transition: all .35s;
}
svg.checkbox .is_unchecked {
opacity: 1;
fill: #fff;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: translateX(0) rotate(0deg);
transform: translateX(0) rotate(0deg);
-webkit-transition: all .35s;
transition: all .35s;
}
@-webkit-keyframes animateRing {
to {
stroke-dashoffset: 0;
stroke: #b0aa28;
}
}
@keyframes animateRing {
to {
stroke-dashoffset: 0;
stroke: #b0aa28;
}
}
@-webkit-keyframes resetRing {
to {
stroke-dashoffset: 0;
stroke: #233043;
}
}
@keyframes resetRing {
to {
stroke-dashoffset: 0;
stroke: #233043;
}
}
/* Switch 3 Specific Style End */
/* Switch 4 Specific Style Start */
.box_4 {
background: #eee;
}
.input_wrapper {
width: 80px;
height: 40px;
position: relative;
cursor: pointer;
}
.input_wrapper input[type="checkbox"] {
width: 80px;
height: 40px;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #315e7f;
border-radius: 2px;
position: relative;
outline: 0;
-webkit-transition: all .2s;
transition: all .2s;
}
.input_wrapper input[type="checkbox"]:after {
position: absolute;
content: "";
top: 3px;
left: 3px;
width: 34px;
height: 34px;
background: #dfeaec;
z-index: 2;
border-radius: 2px;
-webkit-transition: all .35s;
transition: all .35s;
}
.input_wrapper svg {
position: absolute;
top: 50%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
fill: #fff;
-webkit-transition: all .35s;
transition: all .35s;
z-index: 1;
}
.input_wrapper .is_checked {
width: 18px;
left: 18%;
-webkit-transform: translateX(190%) translateY(-30%) scale(0);
transform: translateX(190%) translateY(-30%) scale(0);
}
.input_wrapper .is_unchecked {
width: 15px;
right: 10%;
-webkit-transform: translateX(0) translateY(-30%) scale(1);
transform: translateX(0) translateY(-30%) scale(1);
}
/* Checked State */
.input_wrapper input[type="checkbox"]:checked {
background: #23da87;
}
.input_wrapper input[type="checkbox"]:checked:after {
left: calc(100% - 37px);
}
.input_wrapper input[type="checkbox"]:checked+.is_checked {
-webkit-transform: translateX(0) translateY(-30%) scale(1);
transform: translateX(0) translateY(-30%) scale(1);
}
.input_wrapper input[type="checkbox"]:checked~.is_unchecked {
-webkit-transform: translateX(-190%) translateY(-30%) scale(0);
transform: translateX(-190%) translateY(-30%) scale(0);
}
/* Switch 4 Specific Style End */
</style>
</head>
<body>
<div class="wrapper">
<div class="switch_box box_1">
<input type="checkbox" class="switch_1">
</div>
<div class="switch_box box_2">
<input type="checkbox" class="switch_2">
</div>
<div class="switch_box box_3">
<div class="toggle_switch">
<input type="checkbox" class="switch_3">
<svg class="checkbox" xmlns="http://www.w3.org/2000/svg" style="isolation:isolate"
viewBox="0 0 168 80">
<path class="outer-ring"
d="M41.534 9h88.932c17.51 0 31.724 13.658 31.724 30.482 0 16.823-14.215 30.48-31.724 30.48H41.534c-17.51 0-31.724-13.657-31.724-30.48C9.81 22.658 24.025 9 41.534 9z"
fill="none" stroke="#233043" stroke-width="3" stroke-linecap="square"
stroke-miterlimit="3" />
<path class="is_checked"
d="M17 39.482c0-12.694 10.306-23 23-23s23 10.306 23 23-10.306 23-23 23-23-10.306-23-23z" />
<path class="is_unchecked"
d="M132.77 22.348c7.705 10.695 5.286 25.617-5.417 33.327-2.567 1.85-5.38 3.116-8.288 3.812 7.977 5.03 18.54 5.024 26.668-.83 10.695-7.706 13.122-22.634 5.418-33.33-5.855-8.127-15.88-11.474-25.04-9.23 2.538 1.582 4.806 3.676 6.66 6.25z" />
</svg>
</div>
</div>
<div class="switch_box box_4">
<div class="input_wrapper">
<input type="checkbox" class="switch_4">
<svg class="is_checked" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 426.67 426.67">
<path
d="M153.504 366.84c-8.657 0-17.323-3.303-23.927-9.912L9.914 237.265c-13.218-13.218-13.218-34.645 0-47.863 13.218-13.218 34.645-13.218 47.863 0l95.727 95.727 215.39-215.387c13.218-13.214 34.65-13.218 47.86 0 13.22 13.218 13.22 34.65 0 47.863L177.435 356.928c-6.61 6.605-15.27 9.91-23.932 9.91z" />
</svg>
<svg class="is_unchecked" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 212.982 212.982">
<path
d="M131.804 106.49l75.936-75.935c6.99-6.99 6.99-18.323 0-25.312-6.99-6.99-18.322-6.99-25.312 0L106.49 81.18 30.555 5.242c-6.99-6.99-18.322-6.99-25.312 0-6.99 6.99-6.99 18.323 0 25.312L81.18 106.49 5.24 182.427c-6.99 6.99-6.99 18.323 0 25.312 6.99 6.99 18.322 6.99 25.312 0L106.49 131.8l75.938 75.937c6.99 6.99 18.322 6.99 25.312 0 6.99-6.99 6.99-18.323 0-25.313l-75.936-75.936z"
fill-rule="evenodd" clip-rule="evenodd" />
</svg>
</div>
</div>
</div>
</body>
</html>