当前位置：首页 > news >正文

【CSS样式】有趣的滑块开关

news 2025/7/7 5:37:46

在这里插入图片描述

样式源码地址

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部分代码


.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;
}