使用CSS3实现一个3D开关按钮,可左右滑动
"```html
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<title>3D Switch Button</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.switch {
position: relative;
width: 60px;
height: 30px;
border-radius: 15px;
background-color: #ccc;
cursor: pointer;
transition: background-color 0.3s;
}
.switch::before {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
transition: