HTML&CSS:酷炫的3D开关控件

这段代码创建了一个具有 3D 效果的开关控件,当用户点击滑块时,滑块会移动到开关的另一侧,同时改变背景颜色,模拟开关的开启和关闭状态。动画效果增加了页面的互动性和视觉吸引力。

演示效果

HTML&CSS

html 复制代码
<!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 效果。
相关推荐
Stringzhua16 分钟前
Vue中的数据渲染【4】
css·vue.js·css3
阿珊和她的猫4 小时前
v-scale-scree: 根据屏幕尺寸缩放内容
开发语言·前端·javascript
加班是不可能的,除非双倍日工资9 小时前
css预编译器实现星空背景图
前端·css·vue3
wyiyiyi9 小时前
【Web后端】Django、flask及其场景——以构建系统原型为例
前端·数据库·后端·python·django·flask
gnip9 小时前
vite和webpack打包结构控制
前端·javascript
excel10 小时前
在二维 Canvas 中模拟三角形绕 X、Y 轴旋转
前端
阿华的代码王国10 小时前
【Android】RecyclerView复用CheckBox的异常状态
android·xml·java·前端·后端
一条上岸小咸鱼10 小时前
Kotlin 基本数据类型(三):Booleans、Characters
android·前端·kotlin
Jimmy10 小时前
AI 代理是什么,其有助于我们实现更智能编程
前端·后端·ai编程
ZXT10 小时前
promise & async await总结
前端