自己写一个toggle按钮
2020-07-23 本文已影响0人
窗外的雪儿飞
一、效果图
toggle.gif
二、代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🖐️Toggle Demo</title>
<style>
body {
text-align: center;
padding: 2rem;
}
.switch {
position: relative;
display: inline-block;
}
.switch-input {
display: none;
}
.switch-label {
display: block;
width: 48px;
height: 24px;
text-indent: -150%;
clip: rect(0 0 0 0);
color: transparent;
user-select: none;
}
.switch-label::before,
.switch-label::after {
content: "";
display: block;
position: absolute;
cursor: pointer;
}
.switch-label::before {
width: 100%;
height: 100%;
background-color: #dedede;
border-radius: 9999em;
-webkit-transition: background-color 0.25s ease;
transition: background-color 0.25s ease;
}
.switch-label::after {
top: 0;
left: 0;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
-webkit-transition: left 0.25s ease;
transition: left 0.25s ease;
}
.switch-input:checked+.switch-label::before {
background-color: #2dd36f;
}
.switch-input:checked+.switch-label::after {
left: 24px;
}
</style>
</head>
<body>
<div class="switch">
<input id="switch-key" type="checkbox" class="switch-input"/>
<label for="switch-key" class="switch-label"></label>
</div>
</body>
</html>
