点击后
中间有个相对缓速的动画。
代码:
css
.checkbox {
padding: 0;
margin: 0;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.checkbox_items {
padding: 5px;
position: relative;
display: flex;
align-items: center;
background-color: #69bef1;
border-radius: 50px;
width: 50px;
height: 10px;
border: 4px solid #99ecfa;
cursor: pointer;
overflow: hidden;
transition:
background-color 0.1s,
border-color 0.1s linear;
}
/* 白昼外框色彩 */
.checkbox_input {
display: none;
opacity: 0;
visibility: hidden;
}
/* 隐藏复选框按钮 */
.checkbox_input:checked~.checkbox_items {
background-color: #1a2762;
border-color: #5668b5;
}
/* 黑夜外框色彩 */
.checkbox_sum-moon {
position: relative;
width: 15px;
height: 15px;
background-color: #ffe441;
border-radius: 20px;
transition: transform 0.3s linear;
}
/* 移动按钮样式 */
.checkbox_sum-moon::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 30px;
background-color: #1a2762;
opacity: 0;
transform: translate(5px, -4px);
transition: opacity 0.2s linear;
}
/* 白昼按钮变月 */
.checkbox_input:checked~.checkbox_items .checkbox_sum-moon::before {
opacity: 1;
}
/* 日月切换! */
.checkbox_input:checked~.checkbox_items .checkbox_sum-moon {
transform: translateX(37px);
}
h5
<div class="checkbox">
<input type="checkbox" id="day-night-checkbox" class="checkbox_input">
<label for="day-night-checkbox" class="checkbox_items">
<div class="checkbox_sum-moon"></div>
<div class="checkbox_stars"></div>
<div class="checkbox_star"></div>
<div class="checkbox_cloud-body"></div>
<div class="checkbox_cloud"></div>
</label>
</div>