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

HTMLCSS：酷炫的3D开关控件

article 2024/12/21 16:01:21

这段代码创建了一个具有 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>