这段代码创建了一个具有 3D 效果的开关控件，当用户点击滑块时，滑块会移动到开关的另一侧，同时改变背景颜色，模拟开关的开启和关闭状态。动画效果增加了页面的互动性和视觉吸引力。
演示效果
HTML&CSS
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>前端Hardy</title><style>body {background-color: #212121;display: flex;align-items: center;justify-content: center;width: 100%;height: 100vh;}.switch {font-size: 17px;position: relative;display: inline-block;width: 3.5em;height: 2em;transform-style: preserve-3d;perspective: 500px;animation: toggle__animation 3s infinite;}.switch::before {content: "";position: absolute;width: 100%;height: 100%;left: 0;top: 0;filter: blur(20px);z-index: -1;border-radius: 50px;background-color: #d8ff99;background-image: radial-gradient(at 21% 46%, hsla(183, 65%, 60%, 1) 0px, transparent 50%),radial-gradient(at 23% 25%, hsla(359, 74%, 70%, 1) 0px, transparent 50%),radial-gradient(at 20% 1%, hsla(267, 83%, 75%, 1) 0px, transparent 50%),radial-gradient(at 86% 87%, hsla(204, 69%, 68%, 1) 0px, transparent 50%),radial-gradient(at 99% 41%, hsla(171, 72%, 77%, 1) 0px, transparent 50%),radial-gradient(at 55% 24%, hsla(138, 60%, 62%, 1) 0px, transparent 50%);}.switch input {opacity: 0;width: 0;height: 0;}.slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #fdfefedc;transition: .4s;border-radius: 30px;}.slider:before {position: absolute;content: "";height: 1.4em;width: 1.4em;left: 0.3em;bottom: 0.35em;transition: .4s;border-radius: 50%;box-shadow: rgba(0, 0, 0, 0.17) 0px -10px 10px 0px inset,rgba(0, 0, 0, 0.09) 0px -1px 15px -8px;background-color: #ff99fd;background-image: radial-gradient(at 81% 39%, hsla(327, 79%, 79%, 1) 0px, transparent 50%),radial-gradient(at 11% 72%, hsla(264, 64%, 79%, 1) 0px, transparent 50%),radial-gradient(at 23% 20%, hsla(75, 98%, 71%, 1) 0px, transparent 50%);}.input__check:checked+.slider {background-color: #17202A;}.input__check:checked+.slider:before {transform: translateX(1.5em);}@keyframes toggle__animation {0%,100% {transform: translateY(-10px) rotateX(15deg) rotateY(-20deg);}50% {transform: translateY(0px) rotateX(15deg) rotateY(-20deg);}}</style>
</head><body><label class="switch"><input type="checkbox" class="inputcheck"><span class="slider"></span></label></body></html>
HTML 结构
- switch：定义了一个包含开关控件的标签元素，这个标签被赋予了一个类名 switch，用于应用 CSS 样式。
- inputcheck：一个复选框输入元素，用于控制开关的状态。它被赋予了一个类名 inputcheck。
- slider：一个 span 元素，用于作为开关的滑块（slider），它被赋予了一个类名 slider。
CSS 样式
- .switch：定义了开关的基本样式，包括字体大小、位置、尺寸、3D 转换样式和动画。
- .switch::before：使用伪元素为开关创建一个模糊的背景，增加了视觉效果。
- .switch input：将复选框的透明度设置为 0，使其不可见，因为它的功能由开关的滑块控制。
- .slider：定义了滑块的位置、光标样式、尺寸、背景颜色、过渡效果和圆角。
- .slider:before：使用伪元素为滑块创建一个圆形的前置图形，用于显示滑块的位置。
- .input__check:checked+.slider：当复选框被选中时，改变滑块的背景颜色。
- .input__check:checked+.slider:before：当复选框被选中时，改变滑块前置图形的位置，使其移动到开关的另一侧。
- @keyframes toggle__animation：定义了一个关键帧动画，用于在页面加载时给开关添加一个动态的 3D 效果。