
HTML部分代码
html
<div class="toggle-container">
<input class="toggle-input" id="toggle" type="checkbox" />
<label class="toggle-label" for="toggle">
<div class="face">
<div class="eye left-eye"></div>
<div class="toggle-switch"></div>
<div class="eye right-eye"></div>
<div class="smile"></div>
</div>
</label>
</div>
CSS部分代码
css
.toggle-container {
position: relative;
width: 160px;
height: 80px;
}
.toggle-input {
display: none;
}
.toggle-label {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 140px;
height: 60px;
background: #ff4c4c;
border-radius: 30px;
box-shadow: 0 5px #b93737;
transition: background 0.3s ease-in-out;
cursor: pointer;
padding: 0 10px;
}
.face {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease-in-out;
}
.eye {
position: relative;
width: 10px;
height: 10px;
background: white;
border-radius: 50%;
transition: all 0.3s ease-in-out;
}
.smile {
position: absolute;
bottom: 30px;
left: 50%;
width: 40px;
height: 20px;
border: 2px solid transparent;
border-radius: 50%;
transform: translateX(-50%);
transition: all 0.3s ease-in-out;
}
.toggle-switch {
position: relative;
width: 35px;
height: 20px;
background: white;
border-radius: 10px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
margin: 0 10px;
z-index: 1;
}
.toggle-switch:before {
content: "";
position: absolute;
width: 15px;
height: 15px;
background: #ff4c4c;
border-radius: 50%;
transition: all 0.3s ease-in-out;
top: 50%;
left: 3px;
transform: translateY(-50%);
}
.toggle-input:checked + .toggle-label .toggle-switch:before {
background: #28a745;
left: 16px;
}
.toggle-input:checked + .toggle-label .smile {
border-bottom-color: #fff;
border-top: none;
bottom: 10px;
}
.toggle-input:not(:checked) + .toggle-label .smile {
border-top-color: #fff;
border-bottom: none;
bottom: 0;
}
.toggle-input:checked + .toggle-label {
background: #ced10a;
box-shadow: 0 5px #74c027;
}
.toggle-input:not(:checked) + .toggle-label {
background: #252422;
box-shadow: 0 5px #484d48;
bottom: 5px;
}
.toggle-label:hover .eye {
width: 20px;
height: 20px;
}
@keyframes blink {
0%,
90%,
100% {
height: 10px;
}
95% {
height: 2px;
}
}
.left-eye {
animation: blink 3s infinite;
}
.right-eye {
animation: blink 3s infinite;
}
获取更多样式源码(https://lizitools.com/web/web_style)
