Webleb - UI Elements - car anımation

HTML CSS JS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Car Toggle Switch</title>
    <style>
        :root {
            --car-color: #A54779;
            --wheel-color: #000;
            --light-color: #00f1ff;
            --accent-light: #f7049f;
            --ground-color: #1f0b33;
            --sunset-color: #ffea00;
        }

body {
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(to bottom, #000000 0%, #1f0b33 100%);
            overflow: hidden;
            font-family: 'Arial', sans-serif;
            perspective: 1000px;
        }

.container {
            position: relative;
            width: 100%;
            height: 100vh;
            max-width: 100%;
            max-height: 1160px;
            overflow: hidden;
        }

.container > * {
            user-select: none;
        }

.wrap {
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            overflow: hidden;
        }

.wrap input {
            position: absolute;
            opacity: 0;
            width: 100%;
            height: 100%;
            inset: 0;
            z-index: 999;
            cursor: pointer;
            pointer-events: all;
        }

.area {
            position: absolute;
            margin: auto;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 11;
        }

@media (max-height: 600px) {
            .area {
                top: 40%;
            }
        }

.button {
            transition: all 0.3s ease;
            background: transparent;
            border: 0;
            outline: none;
        }

.button svg {
            display: block;
            overflow: visible;
        }

.car {
            display: flex;
            align-items: center;
            justify-content: center;
            animation: float 3s ease-in-out infinite;
            transform-style: preserve-3d;
        }

.car-svg {
            position: relative;
            z-index: 2;
            transform-style: preserve-3d;
        }

.car .doors {
            position: absolute;
            top: -28px;
            width: 82%;
            z-index: 1;
            transform-style: preserve-3d;
        }

.car .door-l,
        .car .door-r {
            position: absolute;
            transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
            transform-style: preserve-3d;
        }

.car .door-l {
            left: 0;
            transform-origin: top right;
        }

.car .door-r {
            right: 0;
            transform-origin: top left;
        }

.plate {
            position: absolute;
            z-index: 4;
            top: 71px;
            font-size: 17px;
            font-weight: bold;
            letter-spacing: 0.04em;
            width: 100px;
            height: 33px;
            color: rgba(246, 215, 255, 0.7);
            text-shadow: 0 0 4px black;
            overflow: hidden;
            transform-style: preserve-3d;
        }

.plate div {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, #423659 0%, #211233 100%);
            border-radius: 5px;
            box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.4);
            transition: all 0.7s cubic-bezier(0.45, 0, 0.55, 1);
        }

.plate div:nth-child(2) {
            transform: translateY(105%);
        }

.headlights {
            position: absolute;
            width: 69%;
            left: 0;
            right: 0;
            top: 31%;
            margin: auto;
            z-index: 3;
            perspective: 15rem;
            transform-style: preserve-3d;
        }

.headlights .headlight-l,
        .headlights .headlight-r {
            transform-style: preserve-3d;
            position: absolute;
        }

.headlights .headlight-l::before,
        .headlights .headlight-r::before,
        .headlights .headlight-l::after,
        .headlights .headlight-r::after {
            content: "";
            position: absolute;
            width: 20px;
            height: 160px;
            filter: blur(10px);
            transform: rotateX(48deg) translateY(20px) translateZ(50px);
        }

.headlights .headlight-l::before,
        .headlights .headlight-r::before {
            background: linear-gradient(
                to bottom,
                transparent 0%,
                var(--light-color) 0%,
                transparent 100%
            );
        }

.headlights .headlight-l,
        .headlights .headlight-l::before {
            left: 0;
        }

.headlights .headlight-r,
        .headlights .headlight-r::before {
            right: 0;
        }

.headlights .headlight-l::after {
            left: 20px;
        }

.headlights .headlight-r::after {
            right: 20px;
        }

.headlights .headlight-l::after,
        .headlights .headlight-r::after {
            background: linear-gradient(
                to bottom,
                transparent 0%,
                var(--accent-light) 0%,
                transparent 100%
            );
        }

.light,
        .headlights {
            opacity: 0.2;
            transition: all ease 0.6s;
        }

.ground > .wrap-sunset {
            transform: rotateX(50deg) scale(-1);
            top: -20%;
            opacity: 0.5;
        }

@media (max-height: 600px) {
            .ground > .wrap-sunset {
                opacity: 1;
                mask-image: linear-gradient(
                    to bottom,
                    transparent 20%,
                    #000 30%,
                    transparent 75%
                );
                top: 40%;
                transform: rotateX(30deg) scale(2);
            }
        }

.mountain {
            position: absolute;
            bottom: -3px;
            z-index: -1;
            width: auto;
        }

@media (max-height: 600px) {
            .mountain {
                height: 25vh;
            }
        }

.mountain-r {
            left: 49.9%;
        }

.mountain-l {
            transform: scaleX(-1);
            right: 49.9%;
        }

.mountain .back {
            filter: blur(2px);
        }

.ground-light {
            position: absolute;
            left: 0;
            right: 0;
            top: 32%;
            z-index: 10;
        }

.ground-light::before,
        .ground-light::after {
            content: "";
            position: absolute;
            width: 24%;
            height: 3px;
            background: #ffffff;
            box-shadow:
                0 0 10px 2px #00ffa3,
                0 0 30px 15px #009c7b;
            transform: scaleX(3);
        }

.ground-light::before {
            border-radius: 0 50% 50% 0;
            left: 0;
        }

.ground-light::after {
            border-radius: 50% 0 0 50%;
            right: 0;
        }

.fog {
            position: absolute;
            margin: auto;
            inset: 0;
            width: 100%;
            height: 40vh;
            min-height: 200px;
            min-width: 200px;
        }

@media (max-height: 600px) {
            .fog {
                top: -20%;
            }
        }

.fog::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 10vh;
            bottom: 0;
            border-radius: 50%;
            filter: blur(70px);
            box-shadow: 0 -100px 10vh #bd46d4;
        }

.wrap-sunset {
            mask-image: linear-gradient(to bottom, #000 40%, transparent 70%);
            position: absolute;
            margin: auto;
            inset: 0;
            width: 100%;
            height: 40vh;
            min-height: 220px;
            min-width: 220px;
            filter: blur(0.4vh);
        }

@media (max-height: 600px) {
            .wrap-sunset {
                top: -30%;
            }
        }

.sunset {
            background: linear-gradient(
                to bottom,
                var(--sunset-color) 0%,
                var(--accent-light) 50%,
                transparent 100%
            );
            position: absolute;
            overflow: hidden;
            inset: 0;
            margin: auto;
            width: 25vh;
            height: 25vh;
            min-height: 150px;
            min-width: 150px;
            border-radius: 50%;
            filter: brightness(1.1) contrast(1.1);
            animation: squiggly 0.4s linear infinite;
            box-shadow:
                0 0 1vh 0.1vh yellow,
                0 0 2vh 4vh rgba(0, 0, 0, 0.23),
                0 0 3vh 1.3vh #9100ff,
                inset 0 0 5vh 3vh #9200ff;
        }

.sunset .bar {
            perspective: 15rem;
            position: absolute;
            inset: 0;
            top: 0;
            mask-image: linear-gradient(
                to bottom,
                transparent 0%,
                rgba(0, 0, 0, 0.5) 40%
            );
        }

.sunset .bar::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom, var(--ground-color) 28%, transparent 28%);
            background-size: auto 6%;
            transform: rotateX(40deg) scaleX(1.5) translateZ(50px);
            animation: grid 30s linear infinite;
        }

.ground {
            position: absolute;
            top: 40%;
            left: 0;
            right: 0;
            perspective: 15rem;
            width: 100%;
            height: 50%;
        }

@media (max-height: 600px) {
            .ground {
                top: 30%;
            }
        }

.ground::before {
            content: "";
            position: absolute;
            inset: 0;
            bottom: -102px;
            border-top: 1px solid white;
            opacity: 0.3;
            background: linear-gradient(to right, white 1px, transparent 1px),
                linear-gradient(to bottom, white 1px, transparent 1px);
            background-size:
                2rem 125rem,
                125rem 2rem;
            filter: drop-shadow(0 0 2px red);
            transform: rotateX(50deg) scaleX(2) translateZ(40px);
            animation: grid 2.4s linear infinite;
        }

.ground::after {
            content: "";
            position: absolute;
            inset: 0;
            bottom: -100px;
            z-index: 9;
            transform: rotateX(50deg) scaleX(2) translateZ(40px);
            background: linear-gradient(to bottom, transparent 60%, var(--ground-color) 90%);
        }

/* States */
        .wrap input:checked + .button .car .door-l {
            transform: rotate(90deg) translate(66px, -20px);
        }

.wrap input:checked + .button .car .door-r {
            transform: rotate(-90deg) translate(-66px, -20px);
        }

.wrap .area:hover .plate div:nth-child(1) {
            transform: translateY(105%);
        }

.wrap .area:hover .plate div:nth-child(2) {
            transform: translateY(0);
            transition-delay: 0.7s;
        }

.wrap .area:hover .button {
            filter: contrast(1.1);
        }

.wrap .area:active .button {
            transform: translateY(10px);
        }

.wheel {
            transition: all 0.4s ease;
        }

.wheel-l {
            transform-origin: top right;
        }

.wrap .area:active .wheel-l {
            transform: rotate(8deg) translate(12px, 38px);
        }

.wrap .area:active .wheel-r {
            transform: rotate(-8deg) translate(-12px, 38px);
        }

.wrap .area:hover .light-l,
        .wrap .area:hover .light-r,
        .wrap .area:hover .headlights {
            opacity: 1;
        }

.wrap .area:active .light-l,
        .wrap .area:active .light-r,
        .wrap .area:active .headlights {
            animation: blink 0.4s linear;
        }

/* Control Panel */
        .controls {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 15px;
            z-index: 100;
        }

.control-btn {
            padding: 8px 16px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
        }

.control-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-3px);
        }

.control-btn:active {
            transform: translateY(0) scale(0.95);
        }

/* Animations */
        @keyframes blink {
            0%,
            20% {
                opacity: 1;
            }
            21% {
                opacity: 0.2;
            }
            40%,
            60% {
                opacity: 1;
            }
            61%,
            80% {
                opacity: 0.2;
            }
            81% {
                opacity: 1;
            }
        }

@keyframes squiggly {
            0% {
                filter: url("#squiggly-0");
            }
            25% {
                filter: url("#squiggly-1");
            }
            50% {
                filter: url("#squiggly-2");
            }
            75% {
                filter: url("#squiggly-3");
            }
            100% {
                filter: url("#squiggly-4");
            }
        }

@keyframes grid {
            from {
                background-position-y: -30rem;
            }
            to {
                background-position-y: 0%;
            }
        }

@keyframes float {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-20px);
            }
            100% {
                transform: translateY(0);
            }
        }

/* Sound indicator */
        .sound-indicator {
            position: absolute;
            top: 20px;
            right: 20px;
            display: flex;
            align-items: center;
            gap: 8px;
            z-index: 100;
        }

.sound-bar {
            width: 4px;
            height: 20px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 2px;
            transition: all 0.3s ease;
        }

.sound-bar.active {
            background: var(--light-color);
            box-shadow: 0 0 5px var(--light-color);
        }
    </style>
</head>
<body>
    <div class="container">
        <label class="wrap">
            <input id="button" type="checkbox">
            <div class="area">
                <button class="button">
                    <div class="car">
                        <div class="headlights">
                            <div class="headlight-l"></div>
                            <div class="headlight-r"></div>
                        </div>
                        <div class="plate">
                            <div>START</div>
                            <div>ROADS?</div>
                        </div>
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 366 260" height="260" width="366" class="car-svg">
                            
                            <rect fill="black" rx="14" height="48" width="86" y="116.499" x="30" class="wheel wheel-l"></rect>
                            <rect fill="black" rx="14" height="48" width="86" y="116.499" x="250" class="wheel wheel-r"></rect>
                            <g filter="url(#filter0_ddi_8_19)">
                                <path fill="url(#paint0_linear_8_19)" d="M48.5 116.999C56 131.499 68.5 146.499 80.5 151.499C92.5 156.499 142.19 155.499 183 155.499C223.81 155.499 273.5 156.499 285.5 151.499C297.5 146.499 310 131.499 317.5 116.999C325 102.499 326 104.999 326 97.9994C326 93.8655 324.954 91.4754 324.097 90.2112C323.498 89.3279 322.805 88.4616 322.436 87.4603C320.539 82.3092 314.363 65.785 311.839 61.9994C308.892 57.5776 284.219 32.3963 283.362 31.5227C283.335 31.495 283.343 31.5034 283.317 31.4751C282.48 30.5837 258.867 5.47275 251.5 3.99939C244 2.49939 211.508 -0.000610352 183 -0.000610352C154.492 -0.000610352 122 2.49939 114.5 3.99939C107.133 5.47275 83.5197 30.5837 82.6833 31.4751C82.6568 31.5034 82.6648 31.495 82.6377 31.5227C81.7813 32.3963 57.1084 57.5776 54.1605 61.9994C51.6368 65.785 45.4609 82.3092 43.5637 87.4603C43.1949 88.4616 42.5017 89.3279 41.903 90.2112C41.0463 91.4754 40 93.8655 40 97.9994C40 104.999 41 102.499 48.5 116.999Z"></path>
                            </g>
                            
                        </svg>
                        <div class="doors">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 151 184" height="184" width="151" class="door-l">
                                
                            </svg>
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 152 184" height="184" width="152" class="door-r">
                                
                            </svg>
                        </div>
                    </div>
                </button>
            </div>
            <div class="ground">
                <div class="wrap-sunset">
                    <div class="sunset">
                        <div class="bar"></div>
                    </div>
                </div>
                <div class="ground-light">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1043 156" height="156" width="1043" class="mountain mountain-l">
                        
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1043 156" height="156" width="1043" class="mountain mountain-r">
                        
                    </svg>
                </div>
            </div>
            <div class="fog"></div>
        </label>

<div class="sound-indicator">
            <div class="sound-bar" id="sound-bar1"></div>
            <div class="sound-bar" id="sound-bar2"></div>
            <div class="sound-bar" id="sound-bar3"></div>
            <div class="sound-bar" id="sound-bar4"></div>
        </div>

<div class="controls">
            <button class="control-btn" id="color-btn">Change Color</button>
            <button class="control-btn" id="sound-btn">Toggle Sound</button>
            <button class="control-btn" id="reset-btn">Reset</button>
        </div>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <filter id="squiggly-0">
                    <feTurbulence seed="0" result="noise" numOctaves="10" baseFrequency="0.02" id="turbulence"></feTurbulence>
                    <feDisplacementMap scale="4" in2="noise" in="SourceGraphic" id="displacement"></feDisplacementMap>
                </filter>
                <filter id="squiggly-1">
                    <feTurbulence seed="1" result="noise" numOctaves="10" baseFrequency="0.02" id="turbulence"></feTurbulence>
                    <feDisplacementMap scale="6" in2="noise" in="SourceGraphic"></feDisplacementMap>
                </filter>
                <filter id="squiggly-2">
                    <feTurbulence seed="2" result="noise" numOctaves="10" baseFrequency="0.02" id="turbulence"></feTurbulence>
                    <feDisplacementMap scale="4" in2="noise" in="SourceGraphic"></feDisplacementMap>
                </filter>
                <filter id="squiggly-3">
                    <feTurbulence seed="3" result="noise" numOctaves="10" baseFrequency="0.02" id="turbulence"></feTurbulence>
                    <feDisplacementMap scale="6" in2="noise" in="SourceGraphic"></feDisplacementMap>
                </filter>
                <filter id="squiggly-4">
                    <feTurbulence seed="4" result="noise" numOctaves="10" baseFrequency="0.02" id="turbulence"></feTurbulence>
                    <feDisplacementMap scale="4" in2="noise" in="SourceGraphic"></feDisplacementMap>
                </filter>
            </defs>
        </svg>
    </div>

Preview

Open Advanced Editor