html--车

于 2024-07-25 13:34:31 发布
阅读量563 收藏 4
点赞数 12
分类专栏： html 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stqer/article/details/137814008
版权

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>纯css汽车</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <input class="action night" type="checkbox" data-text="NIGHT" />
    <input class="action headlight" type="checkbox" data-text="HEADLIGHT" />
    <input class="action window" type="checkbox" data-text="WINDOW" />
    <input class="action bonnet" type="checkbox" data-text="BONNET" />
    <input class="action luggage" type="checkbox" data-text="LUGGAGE" />
    <input class="action door" type="checkbox" data-text="DOOR" />
    <input class="action gull" type="checkbox" data-text="SCISSOR" />
    <input class="action roof" type="checkbox" data-text="CONVERTIBLE" />
    <input class="action lowdown" type="checkbox" data-text="LOWDOWN" />
    <input class="action aero" type="checkbox" data-text="CUSTOM" />
    <input class="action neon" type="checkbox" data-text="NEON" />
    <input class="action run" type="checkbox" data-text="DRIVE" />
    <input class="action zoom" type="checkbox" data-text="ZOOM" />
    <input class="action ride" type="checkbox" data-text="RIDE" />
    <div id="field"></div>
    <div id="showcase">
        <div class="camera">
            <div class="shadow">
                <div class="blur"></div>
            </div>
            <div class="car">
                <div class="body">
                    <div class="front">
                        <div class="bumper">
                            <div class="aero">
                                <div class="parts"></div>
                            </div>
                        </div>
                        <div class="bonnet">
                            <div class="aero">
                                <div class="parts"></div>
                            </div>
                        </div>
                        <div class="headlight headlight_left">
                            <div class="headlight_cover"></div>
                            <div class="headlight_unit"></div>
                            <div class="headlight_unit_left"></div>
                            <div class="headlight_unit_right"></div>
                        </div>
                        <div class="headlight headlight_right">
                            <div class="headlight_cover"></div>
                            <div class="headlight_unit"></div>
                            <div class="headlight_unit_left"></div>
                            <div class="headlight_unit_right"></div>
                        </div>
                        <div class="fender fender_left">
                            <div class="aero">
                                <div class="parts"></div>
                            </div>
                            <div class="panel"></div>
                        </div>
                        <div class="fender fender_right">
                            <div class="aero">
                                <div class="parts"></div>
                            </div>
                            <div class="panel"></div>
                        </div>
                        <div class="under"></div>
                    </div>
                    <div class="cockpit">
                        <div class="inner inner_front"></div>
                        <div class="inner inner_back"></div>
                        <div class="window window_front"></div>
                        <div class="roof">
                            <div class="roof_top"></div>
                            <div class="roof_back window"></div>
                            <div class="roof_left"></div>
                            <div class="roof_right"></div>
                            <div class="roof_bottom"></div>
                        </div>
                        <div class="door door_left">
                            <div class="gull">
                                <div class="window">
                                    <div class="glass"></div>
                                </div>
                                <div class="panel"></div>
                                <div class="mirror"></div>
                                <div class="aero">
                                    <div class="parts"></div>
                                </div>
                            </div>
                        </div>
                        <div class="door door_right">
                            <div class="gull">
                                <div class="window">
                                    <div class="glass"></div>
                                </div>
                                <div class="panel"></div>
                                <div class="mirror"></div>
                                <div class="aero">
                                    <div class="parts"></div>
                                </div>
                            </div>
                        </div>
                        <div class="under"></div>
                        <div class="seat seat_left"></div>
                        <div class="seat seat_right"></div>
                        <div class="handle"></div>
                        <div class="back_mirror"></div>
                    </div>
                    <div class="rear">
                        <div class="bumper">
                            <div class="taillight taillight_left"></div>
                            <div class="taillight taillight_right"></div>
                            <div class="aero">
                                <div class="parts">
                                    <div class="arm arm_left"></div>
                                    <div class="arm arm_right"></div>
                                    <div class="wing"></div>
                                    <div class="bottom"></div>
                                </div>
                            </div>
                        </div>
                        <div class="fender fender_left">
                            <div class="panel"></div>
                            <div class="aero">
                                <div class="parts"></div>
                            </div>
                        </div>
                        <div class="fender fender_right">
                            <div class="panel"></div>
                            <div class="aero">
                                <div class="parts"></div>
                            </div>
                        </div>
                        <div class="luggage">
                            <div class="panel"></div>
                        </div>
                        <div class="under"></div>
                        <div class="lamp lamp_left"></div>
                        <div class="lamp lamp_right"></div>
                        <div class="muffler"></div>
                    </div>
                </div>
                <div class="wheel">
                    <div class="front">
                        <div class="shaft"></div>
                        <div class="tire tire_left"></div>
                        <div class="tire tire_right"></div>
                    </div>
                    <div class="rear">
                        <div class="shaft"></div>
                        <div class="tire tire_left"></div>
                        <div class="tire tire_right"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

style.css


body {
    background: #fff;
    height: 100vh;
    overflow: hidden;
    display: flex;
    font-family: 'Anton', sans-serif;
    justify-content: center;
    align-items: center;
    perspective: 800px;
    flex-direction: column;
}

div {
    position: absolute;
    transform-style: preserve-3d;
    background: linear-gradient(45deg, #4b79ae 0%, #7dabe0 100%);
    box-sizing: border-box;
    transition: 1000ms;
    will-change: transform;
}

.window,
.glass {
    background: rgba(0, 70, 150, 0.6);
}

#field {
    width: 100%;
    height: 100%;
    background: #fff;
}

#showcase {
    pointer-events: none;
    animation: drive 10000ms linear infinite;
}

#showcase .shadow {
    width: 120px;
    height: 200px;
    background: none;
    transform-origin: 50% 0%;
    transform: translate(-60px, 25px) translateZ(100px) rotateX(-90deg);
}

#showcase .shadow .blur {
    width: 100%;
    height: 100%;
    background: #c8c8c8;
    filter: blur(10px);
}

#showcase .car {
    transform: translate(-50px, 0px) translateZ(90px);
}

#showcase .car .body {
    transition: 2000ms;
}

#showcase .car .body .aero {
    transform-origin: 50px -100px;
    transform: scale(0);
}

#showcase .car .body .front {
    transform: translate(0, -20px);
}

#showcase .car .body .front .bumper {
    width: 100px;
    height: 20px;
}

#showcase .car .body .front .bumper::before {
    content: '';
    position: absolute;
    background: orange;
    width: 6px;
    height: 6px;
    border-radius: 20px;
    transform: translate(5px, 5px);
}

#showcase .car .body .front .bumper::after {
    content: '';
    position: absolute;
    background: orange;
    width: 6px;
    height: 6px;
    border-radius: 20px;
    transform: translate(89px, 5px);
}

#showcase .car .body .front .bumper .aero .parts {
    width: 120px;
    height: 10px;
    transform-origin: 50% 0%;
    transform: translate(-10px, 20px) rotateX(60deg);
}

#showcase .car .body .front .bonnet {
    width: 100px;
    height: 70px;
    transform-origin: 50% 0%;
    transform: translate(0px, -24px) translateZ(-66px) rotateX(70deg);
    clip-path: polygon(0% 0%, 100% 0%, 100% 50px, 75px 50px, 75px 100%, 25px 100%, 25px 50px, 0% 50px);
}

#showcase .car .body .front .bonnet .aero .parts {
    width: 40px;
    height: 20px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 70%, black 100%);
    transform: translate(30px, 20px);
}

#showcase .car .body .front .headlight {
    width: 25px;
    height: 20px;
    transform-origin: 50% 0%;
    background: none;
}

#showcase .car .body .front .headlight_left {
    transform: translate(1px, -7px) translateZ(-19px) rotateX(70deg);
}

#showcase .car .body .front .headlight_right {
    transform: translate(74px, -7px) translateZ(-19px) rotateX(70deg);
}

#showcase .car .body .front .headlight_cover {
    width: 25px;
    height: 20px;
}

#showcase .car .body .front .headlight_unit {
    width: 25px;
    height: 20px;
    background: #e4b3a9;
    transform-origin: 50% 100%;
    transform: rotateX(70deg);
}

#showcase .car .body .front .headlight_unit::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: linear-gradient(45deg, #4b79ae 0%, #7dabe0 100%);
    transform-origin: 0% 0%;
    transform: rotateY(-90deg);
    clip-path: polygon(100% 60%, 0% 0%, 0% 100%);
}

#showcase .car .body .front .headlight_unit::after {
    content: '';
    position: absolute;
    right: 0;
    width: 20px;
    height: 20px;
    background: linear-gradient(45deg, #4b79ae 0%, #7dabe0 100%);
    transform-origin: 100% 0%;
    transform: rotateY(90deg);
    clip-path: polygon(0% 60%, 100% 0%, 100% 100%);
}

#showcase .car .body .front .fender {
    width: 66px;
    height: 44px;
    transform-origin: 0% 0%;
    background: none;
}

#showcase .car .body .front .fender .panel {
    width: 100%;
    height: 100%;
    clip-path: polygon(0 24px, 100% 0%, 100% 100%, 60px 100%, 50px 24px, 30px 24px, 20px 100%, 0% 100%);
}

#showcase .car .body .front .fender_left {
    transform: translate(100px, -24px) rotateY(90deg);
}

#showcase .car .body .front .fender_left .aero .parts {
    width: 40px;
    height: 10px;
    transform-origin: 100% 0%;
    transform: translate(-15px, 15px) rotateX(90deg) rotateY(-50deg);
}

#showcase .car .body .front .fender_left .aero .parts::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 10px;
    background: linear-gradient(45deg, #4b79ae 0%, #7dabe0 100%);
    transform-origin: 0% 0%;
    transform: translate(40px, 0px) rotateY(35deg);
}

#showcase .car .body .front .fender_right {
    transform: translate(0px, -24px) rotateY(90deg);
}

#showcase .car .body .front .fender_right .aero .parts {
    width: 40px;
    height: 10px;
    transform-origin: 100% 0%;
    transform: translate(-15px, 15px) translateZ(-10px) rotateX(90deg) rotateY(-50deg);
}

#showcase .car .body .front .fender_right .aero .parts::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 10px;
    background: linear-gradient(45deg, #4b79ae 0%, #7dabe0 100%);
    transform-origin: 0% 0%;
    transform: translate(40px, 0px) rotateY(35deg);
}

#showcase .car .body .front .under {
    width: 100px;
    height: 66px;
    transform-origin: 50% 100%;
    transform: translate(0, -46px) rotateX(90deg);
    clip-path: polygon(10px 0%, 90px 0%, 90px 100%, 10px 100%);
}

#showcase .car .body .cockpit {
    transform: translate(0, -44px) translateZ(-66px);
}

#showcase .car .body .cockpit .handle {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    transform: translate(15px, -5px) translateZ(-15px) rotateX(-20deg);
    background: none;
    border: 5px solid #323232;
}

#showcase .car .body .cockpit .seat {
    width: 30px;
    height: 60px;
    background: whitesmoke;
    transform-origin: 50% 100%;
    border-radius: 5px 5px 0 0;
}

#showcase .car .body .cockpit .seat::before {
    content: '';
    position: absolute;
    bottom: 0;
    width: 30px;
    height: 30px;
    background: whitesmoke;
    transform-origin: 50% 100%;
    transform: rotateX(-100deg);
}

#showcase .car .body .cockpit .seat_left {
    transform: translate(55px, -20px) translateZ(-45px) rotateX(22deg);
}

#showcase .car .body .cockpit .seat_right {
    transform: translate(15px, -20px) translateZ(-45px) rotateX(22deg);
}

#showcase .car .body .cockpit .inner_front {
    width: 100px;
    height: 44px;
    background: linear-gradient(45deg, #323232 0%, #646464 100%);
}

#showcase .car .body .cockpit .inner_back {
    width: 100px;
    height: 48px;
    transform-origin: 50% 0%;
    transform: translateZ(-70px) rotateX(24deg);
    background: linear-gradient(45deg, #323232 0%, #646464 100%);
}

#showcase .car .body .cockpit .door {
    width: 70px;
    height: 44px;
    transform-origin: 0% 0%;
    background: none;
}

#showcase .car .body .cockpit .door .gull {
    transition: 1200ms;
}

#showcase .car .body .cockpit .door .window {
    width: 70px;
    height: 30px;
    transform-origin: 0% 0%;
    transform: translate(0px, -30px);
    background: none;
    overflow: hidden;
}

#showcase .car .body .cockpit .door .window .glass {
    width: 70px;
    height: 30px;
    clip-path: polygon(30px 0%, 100% 0%, 100% 100%, 0% 100%);
    transition: 1500ms;
    transition-timing-function: linear;
}

#showcase .car .body .cockpit .door .panel {
    width: 70px;
    height: 44px;
    clip-path: polygon(0% 0%, 100% 0%, 50px 100%, 0% 100%);
}

#showcase .car .body .cockpit .door .mirror {
    width: 20px;
    height: 10px;
    transform-origin: 0% 0%;
}

#showcase .car .body .cockpit .door_left {
    transform: translate(100px, 0px) rotateY(90deg);
}

#showcase .car .body .cockpit .door_left .aero .parts {
    width: 56px;
    height: 13px;
    transform-origin: 0% 0%;
    transform: translate(-6px, 44px) rotateX(45deg);
}

#showcase .car .body .cockpit .door_left .mirror {
    transform: translate(10px, -10px) rotateY(-60deg);
}

#showcase .car .body .cockpit .door_left .mirror::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 10px;
    background: silver;
    border: 2px solid #4b79ae;
    transform: translateZ(-1px);
    box-sizing: border-box;
}

#showcase .car .body .cockpit .door_left .panel::before {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #323232 0%, #646464 100%);
    transform: translateZ(-1px);
    clip-path: polygon(1% 1%, 99% 1%, 50px 99%, 1% 99%);
}

#showcase .car .body .cockpit .door_right {
    transform: translate(0px, 0px) rotateY(90deg);
}

#showcase .car .body .cockpit .door_right .aero .parts {
    width: 56px;
    height: 13px;
    transform-origin: 0% 0%;
    transform: translate(-6px, 44px) rotateX(-45deg);
}

#showcase .car .body .cockpit .door_right .mirror {
    transform: translate(10px, -10px) rotateY(60deg);
}

#showcase .car .body .cockpit .door_right .mirror::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 10px;
    background: silver;
    border: 2px solid #4b79ae;
    transform: translateZ(1px);
    box-sizing: border-box;
    backface-visibility: hidden;
}

#showcase .car .body .cockpit .door_right .panel::before {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #323232 0%, #646464 100%);
    transform: translateZ(1px);
    clip-path: polygon(1% 1%, 99% 1%, 50px 99%, 1% 99%);
}

#showcase .car .body .cockpit .under {
    width: 100px;
    height: 50px;
    transform-origin: 50% 100%;
    transform: translate(0, -6px) rotateX(90deg);
    background: linear-gradient(45deg, #323232 0%, #646464 100%);
}

#showcase .car .body .cockpit .roof {
    width: 100px;
    transform-origin: 50% 10px;
    transform: translate(0px, -10px) translateZ(-70px) rotateX(0deg);
    transition: 2000ms;
}

#showcase .car .body .cockpit .roof_top {
    width: 100px;
    height: 40px;
    transform-origin: 50% 100%;
    transform: translate(0px, -60px) rotateX(-90deg);
}

#showcase .car .body .cockpit .roof_back {
    width: 100px;
    height: 36px;
    transform-origin: 50% 0%;
    transform: translate(0px, -20px) rotateX(-35deg);
    clip-path: polygon(0% 0%, 12px 100%, 88px 100%, 100% 0%);
}

#showcase .car .body .cockpit .roof_left {
    width: 24px;
    height: 30px;
    transform-origin: 0% 0%;
    transform: translate(100px, -20px) rotateY(120deg);
    clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
}

#showcase .car .body .cockpit .roof_right {
    width: 24px;
    height: 30px;
    transform-origin: 0% 0%;
    transform: translate(0px, -20px) rotateY(60deg);
    clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
}

#showcase .car .body .cockpit .roof_bottom {
    width: 100px;
    height: 20px;
    transform-origin: 50% 100%;
    transform: translate(0px, -10px) rotateX(90deg);
    clip-path: polygon(0% 100%, 10px 0%, 90px 0%, 100% 100%);
}

#showcase .car .body .cockpit .window {
    background: rgba(0, 70, 150, 0.6);
}

#showcase .car .body .cockpit .window_front {
    width: 100px;
    height: 42px;
    transform-origin: 50% 100%;
    transform: translate(0px, -42px) rotateX(45deg);
}

#showcase .car .body .cockpit .window_front::before {
    content: '';
    position: absolute;
    width: 5px;
    height: 42px;
    background: linear-gradient(45deg, #4b79ae 0%, #7dabe0 100%);
}

#showcase .car .body .cockpit .window_front::after {
    content: '';
    position: absolute;
    right: 0;
    width: 5px;
    height: 42px;
    background: linear-gradient(45deg, #4b79ae 0%, #7dabe0 100%);
}

#showcase .car .body .cockpit .window_left {
    width: 70px;
    height: 30px;
    transform-origin: 0% 0%;
    transform: translate(100px, -30px) rotateY(90deg);
    clip-path: polygon(30px 0%, 100% 0%, 100% 100%, 0% 100%);
}

#showcase .car .body .cockpit .window_right {
    width: 70px;
    height: 30px;
    transform-origin: 0% 0%;
    transform: translate(0px, -30px) rotateY(90deg);
    clip-path: polygon(30px 0%, 100% 0%, 100% 100%, 0% 100%);
}

#showcase .car .body .rear {
    transform: translate(0px, -44px) translateZ(-116px);
}

#showcase .car .body .rear .bumper {
    width: 100px;
    height: 44px;
    transform: translateZ(-60px);
}

#showcase .car .body .rear .bumper .aero .parts .arm_right {
    width: 10px;
    height: 50px;
    transform-origin: 0% 0%;
    transform: translate(18px, -20px) rotateY(90deg);
    border-radius: 0 0 100% 0;
}

#showcase .car .body .rear .bumper .aero .parts .arm_left {
    width: 10px;
    height: 50px;
    transform-origin: 0% 0%;
    transform: translate(82px, -20px) rotateY(90deg);
    border-radius: 0 0 100% 0;
}

#showcase .car .body .rear .bumper .aero .parts .wing {
    width: 120px;
    height: 20px;
    transform-origin: 50% 100%;
    transform: translate(-10px, -35px) rotateX(70deg);
}

#showcase .car .body .rear .bumper .aero .parts .garnish {
    width: 100px;
    height: 10px;
    transform: translateZ(-0.1px);
}

#showcase .car .body .rear .bumper .aero .parts .bottom {
    width: 100px;
    height: 10px;
    transform-origin: 50% 0%;
    transform: translate(0px, 44px) rotateX(-40deg);
}

#showcase .car .body .rear .bumper .taillight {
    content: '';
    position: absolute;
    top: 4px;
    width: 12px;
    height: 12px;
    background: #c80000;
    border-radius: 100%;
    transform: translateZ(-1px);
}

#showcase .car .body .rear .bumper .taillight_right {
    right: 5px;
}

#showcase .car .body .rear .bumper .taillight_right::before {
    content: '';
    position: absolute;
    right: 14px;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background: #c80000;
}

#showcase .car .body .rear .bumper .taillight_left {
    left: 5px;
}

#showcase .car .body .rear .bumper .taillight_left::before {
    content: '';
    position: absolute;
    left: 14px;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background: #c80000;
}

#showcase .car .body .rear .fender {
    width: 60px;
    height: 44px;
    background: none;
    transform-origin: 0% 0%;
}

#showcase .car .body .rear .fender .panel {
    width: 100%;
    height: 100%;
    clip-path: polygon(20px 0%, 100% 0%, 100% 100%, 50px 100%, 40px 24px, 20px 24px, 10px 100%, 0% 100%);
}

#showcase .car .body .rear .fender_left {
    transform: translate(100px, 0px) rotateY(90deg);
}

#showcase .car .body .rear .fender_left .aero .parts {
    width: 47px;
    height: 10px;
    transform-origin: 100% 0%;
    transform: translate(-30px, 10px) rotateX(90deg) rotateY(-65deg);
}

#showcase .car .body .rear .fender_left .aero .parts::before {
    content: '';
    position: absolute;
    width: 42px;
    height: 10px;
    background: linear-gradient(45deg, #4b79ae 0%, #7dabe0 100%);
    transform-origin: 100% 0%;
    transform: translate(5px, 0px) rotateY(-115deg);
}

#showcase .car .body .rear .fender_right {
    transform: rotateY(90deg);
}

#showcase .car .body .rear .fender_right .aero .parts {
    width: 47px;
    height: 10px;
    transform-origin: 100% 0%;
    transform: translate(-30px, 10px) rotateX(-90deg) rotateY(65deg);
}

#showcase .car .body .rear .fender_right .aero .parts::before {
    content: '';
    position: absolute;
    width: 42px;
    height: 10px;
    background: linear-gradient(45deg, #4b79ae 0%, #7dabe0 100%);
    transform-origin: 100% 0%;
    transform: translate(5px, 0px) rotateY(115deg);
}

#showcase .car .body .rear .under {
    width: 100px;
    height: 60px;
    transform-origin: 50% 100%;
    transform: translate(0px, -16px) rotateX(90deg);
    clip-path: polygon(10px 0%, 90px 0%, 90px 100%, 10px 100%);
}

#showcase .car .body .rear .luggage {
    width: 100px;
    height: 40px;
    transform-origin: 50% 100%;
    transform: translate(0px, -40px) translateZ(-20px) rotateX(90deg);
    background: none;
}

#showcase .car .body .rear .luggage .panel {
    width: 100px;
    height: 40px;
    transform-origin: 50% 100%;
    clip-path: polygon(0% 0%, 0% 100%, 10px 20px, 90px 20px, 100% 100%, 100% 0%);
    transition-delay: 500ms;
}

#showcase .car .wheel .tire {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background: #646464;
    border: 8px solid black;
    transition: 500ms;
    transition-delay: 500ms;
}

#showcase .car .wheel .tire_left {
    transform: translate(75px, -15px) rotateY(90deg);
}

#showcase .car .wheel .tire_right {
    transform: translate(-15px, -15px) rotateY(90deg);
}

#showcase .car .wheel .shaft {
    width: 90px;
    height: 10px;
    background: #646464;
    transform: translate(5px, 0px);
    transition: 500ms;
    transition-delay: 500ms;
}

#showcase .car .wheel .shaft::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #646464;
    transform: rotateX(90deg);
}

#showcase .car .wheel .front {
    transform: translate(0px, 0px) translateZ(-40px);
}

#showcase .car .wheel .rear {
    transform: translate(0px, 0px) translateZ(-145px);
}

@keyframes drive {
    0% {
        transform: rotateX(-30deg) rotateY(0deg);
    }

    100% {
        transform: rotateX(-30deg) rotateY(-360deg);
    }
}

.action {
    position: relative;
    z-index: 9999999;
    display: block;
    transform: translateX(-300px);
    line-height: 14px;
    margin: 5px;
}

.action::before {
    content: attr(data-text);
    font-size: 16px;
    font-family: 'Encode Sans Condensed', sans-serif;
    padding-left: 20px;
    transition: 1000ms;
    cursor: pointer;
}

.action:hover::before {
    color: #4b79ae;
    transition: 300ms;
}

.action.bonnet[type="checkbox"]:checked~#showcase .bonnet {
    transform: translate(0px, -24px) translateZ(-66px) rotateX(130deg);
}

.action.door[type="checkbox"]:checked~#showcase .door_left {
    transform: translate(100px, 0px) rotateY(30deg);
}

.action.door[type="checkbox"]:checked~#showcase .door_right {
    transform: translate(0px, 0px) rotateY(150deg);
}

.action.roof[type="checkbox"]:checked~#showcase .roof {
    transform: translate(0px, -10px) translateZ(-80px) rotateX(90deg);
    transition-delay: 300ms;
}

.action.roof[type="checkbox"]:checked~#showcase .roof_top {
    transform: translate(0px, -60px) rotateX(-180deg);
    transition-delay: 800ms;
}

.action.roof[type="checkbox"]:checked~#showcase .luggage .panel {
    transform-origin: 50% 0%;
    transform: rotateX(-40deg);
    transition-delay: 0ms;
}

.action.luggage[type="checkbox"]:checked~#showcase .luggage .panel {
    transform: rotateX(-40deg);
    transition-delay: 500ms;
}

.action.window[type="checkbox"]:checked~#showcase .window .glass {
    transform: translateY(30px);
}

.action.headlight[type="checkbox"]:checked~#showcase .headlight_left {
    transform: translate(1px, -7px) translateZ(-19px) rotateX(110deg);
    transition: 600ms;
}

.action.headlight[type="checkbox"]:checked~#showcase .headlight_right {
    transform: translate(74px, -7px) translateZ(-19px) rotateX(110deg);
    transition: 600ms;
}

.action.gull[type="checkbox"]:checked~#showcase .door_left .gull {
    transform: rotateY(-20deg) rotateZ(-60deg);
}

.action.gull[type="checkbox"]:checked~#showcase .door_right .gull {
    transform: rotateY(20deg) rotateZ(-60deg);
}

.action.night[type="checkbox"]:checked~#field {
    background: #282828;
}

.action.night[type="checkbox"]:checked~#showcase .shadow .blur {
    background: #141414;
}

.action.night[type="checkbox"]:checked~.action::before {
    color: #fff;
}

.action.night[type="checkbox"]:checked::before {
    color: #fff;
}

.action.neon[type="checkbox"]:checked~#showcase .shadow .blur {
    background: #40ef46;
}

.action.run[type="checkbox"]:checked~#showcase .car {
    transform: translate(200px, 0px) translateZ(90px);
}

.action.run[type="checkbox"]:checked~#showcase .shadow {
    transform: translate(190px, 25px) translateZ(100px) rotateX(-90deg);
}

.action.lowdown[type="checkbox"]:checked~#showcase .body {
    transform: translate(0px, 16px);
}

.action.lowdown[type="checkbox"]:checked~#showcase .tire_left {
    transform: translate(90px, -15px) rotateZ(-12deg) rotateY(90deg);
    transition-delay: 0ms;
}

.action.lowdown[type="checkbox"]:checked~#showcase .tire_right {
    transform: translate(-30px, -15px) rotateZ(12deg) rotateY(90deg);
    transition-delay: 0ms;
}

.action.lowdown[type="checkbox"]:checked~#showcase .shaft {
    width: 120px;
    transform: translate(-10px, 0px);
    transition-delay: 0ms;
}

.action.aero[type="checkbox"]:checked~#showcase .aero {
    transform: scale(1);
}

.action.aero[type="checkbox"]:checked~#showcase .tire {
    background: #5f6c96;
    border-width: 3px;
}

.action.aero[type="checkbox"]:checked~#showcase .shaft {
    background: #5f6c96;
}

.action.aero[type="checkbox"]:checked~#showcase .shaft::before {
    background: #5f6c96;
}

.action.zoom[type="checkbox"]:checked~#showcase .camera {
    transform: scale3d(2, 2, 2);
}

.action.ride[type="checkbox"]:checked~#showcase .camera {
    transform: scale3d(50, 50, 50) translate(20px, 42px) translateZ(17px);
}

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

fo安方
关注
  • 12
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【HTML——汽车生成特效】
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
01-14 374
目录效果代码 效果 代码 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>汽车</title> <link rel="stylesheet" href="style.css"> </head> <body> <input class="action
一个简单的html汽车网站，适合初学者使用
10-18
是一个简单的汽车网站，适合初学者使用，希望可以帮助你，谢谢下载
我的纯HTML网页（汽车网页）
nowjavac的专栏
08-26 2339
http://accp.web-04.com/   http://accp.web-04.com/zuopin3.html   http://accp.web-04.com/zuopin2.html
汽车模板HTML
12-26
汽车模板HTML
html汽车服务模板,汽车维修HTML模板
weixin_30752653的博客
07-01 310
AutoServicing 旨在帮助汽车服务提供商在线发布其投资组合，并向客户提供服务详细信息。该网站模板非常适合创建汽车维修店，汽车修理，洗车，加油站，汽车展厅涂装，汽车主要汽车中心等汽车和汽车服务相关的备件和配件的网站。资源下载此资源下载价格为5D币，请先登录资源文件列表auto-servicing/.DS_Store,6148auto-servicing/404-dark.html,...
琳琅车售----车辆销售.rar
07-30
在琳琅车售系统中，JSP主要负责将后端处理的结果渲染成用户可见的HTML页面。开发者可以在JSP页面中混合Java代码和HTML，方便地进行视图层的开发。 该系统可能包含以下核心模块： 1. 车辆管理：包括车辆信息的录入...
HTML5小游戏【爸爸去兜风，赛车游戏】源码分享下载-bbqdf.zip
05-28
HTML5小游戏【爸爸去兜风，赛车游戏】源码分享下载---bbqdf.zipHTML5小游戏【爸爸去兜风，赛车游戏】源码分享下载---bbqdf.zipHTML5小游戏【爸爸去兜风，赛车游戏】源码分享下载---bbqdf.zipHTML5小游戏【爸爸去兜风...
HTML5小游戏【汽车冲冲冲（赛车游戏）-425款经典优秀H5小游戏合集】游戏源码分享下载 - HeroRush.zip
06-23
HTML5小游戏【汽车冲冲冲（赛车游戏）--425款经典优秀H5小游戏合集】游戏源码分享下载 --- HeroRush.zipHTML5小游戏【汽车冲冲冲（赛车游戏）--425款经典优秀H5小游戏合集】游戏源码分享下载 --- HeroRush.zipHTML5...
gulp-html-accents：将重音符号和其他变音符号编码为HTML实体
02-03
gulp-html-accents 使用将重音符号和其他变音符号编码为HTML实体。 < p> Olá, tudo bem com você? 编码为 < p> Olá, tudo bem com você? 用法 像任何其他gulp插件一样。 const gulp = require ( '...
基于Python的Django-html基于深度学习的车俩特征分析系统源码-说明文档
最新发布
07-18
基于Python的Django-html基于深度学习的车俩特征分析系统 项目关键技术 开发工具：Pycharm 编程语言: python 数据库: MySQL5.7+ 后端技术：Django 前端技术：HTML 关键技术：HTML、MYSQL、Python 数据库工具：...
html5 canvas 3D汽车模型排放尾气动画特效
06-11
一款three基于html5 canvas绘制的3D汽车模型排放尾气动画特效，汽车排气管吐烟动画效果。
基于html汽车商城网站页面设计与实现.rar（毕业设计+毕业源码+答辩PPT）
11-07
界面查看： https://blog.csdn.net/weixin_40228600/article/details/121188844 摘 要 V 关键字：html；css；jQuery；网站美化；交互设计。 VI 1.1 选题背景及意义 III 1.2 研究内容和拟解决的问题 III (1) 排版 III (2) 单页布局的设计 III (3) 交互性 III 1.3 本章小结 IV 第2章 前端开发工具及相关技术 IV 1.4 前端开发环境 IV 1.5 前端开发工具 IV 1.6 前端开发相关技术 V 1.6.1 Java script 简介 V 1.6.2 Java script 基本特点 V 1.6.3 CSS简介 VI 1.6.4 JQuery VI (1) 提供了强大的功能函数 VII (2) 解决浏览器兼容性问题 VII (3) 实现丰富的UI VII (4) 纠正错误的脚本知识 VII 1.6.5 HTML VIII 1.7 本章小结 IX 第2章 前端布局分析与设计 IX 1.8 前端总体开发流程及设计 IX 1.8.1 分层开发 X 1.8.2 代码编写 X 1.8.3 内部测试与后续优化 X 1.8.4 CSS元素 XI 1.9 网站结构布局及设计 XII 1.9.1 网站首页结构 XII 1.9.2 主题鲜明，富有特色 XIV 1.9.3 商品版式编排布局合理性 XIV 1.9.4 登录页排布局合理性 XV 1.9.5 注册页排布局合理性 XVI 1.10 网站前台页面设计 XVII 1.10.1 首页 XVII 1.11 本章小结 XVII 第2章 主要功能的实现 XVII 2.1 界面设计 XVII 2.2 具体设计文档 XVIII 2.3 可视化设计 XVIII 2.4 具体实现技术 XVIII 2.4.1 CSS在"数字媒体技术系网站"中的应用实例 XVIII 2.4.2 应用JavaScript设计网页 XIX 2.5 本章小结 XXI 第3章 可行性分析 XXI 3.1.1技术可行性 XXI 3.1.2经济可行性 XXII 第4章 需求分析 XXII 4.1 设计目标 XXII 第3章 总结 XXIII 3.1 总结 XXIII 参考文献 24
JS飞机驾驶舱动画特效
04-25
JS飞机驾驶舱动画特效是一款基于Vue.js实现的太空中飞行的火箭驾驶舱控制台动画特效。
大众汽车用html写出来代码,大家一起来学HTML代码
weixin_39804603的博客
06-15 305
首先申明:这不是教啊,我也不会,最近在学呢.所以把找到的资料拿出来大家分享,让我们一起进步吧HTML入门HTML英语意思是：HypertextMarkedLanguage，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX，WINDOWS等)。自1990年以来HTML就一直被用作WorldWideWe...
HTML制作一个汽车介绍网站【大学生网页制作期末作业】(汽车首页 1页 带psd)
11-30 790
使用html+css实现一个静态页面（含源码） 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
车辆销售html页面模板,响应式汽车经销商HTML模板
weixin_36324695的博客
06-03 487
一款功能齐全的 HTML5 模板，专为汽车经销商网站，车载门户网站设计开发，并为企业网站提供便利。资源下载此资源下载价格为5D币，请先登录资源文件列表AutoStars/404.html,35953AutoStars/about.html,41291AutoStars/add-listing-form.html,97110AutoStars/add-listing-pricing.ht...
HTML5网页设计成品：汽车介绍特斯拉 (dreamweaver作业静态HTML网页设计模板)
专注于dreamweaver网页设计制作
08-09 671
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🚗汽车网站、🚘汽车介绍、🚍汽车官网、汽车租赁、企业网页 、等网站的设计与制作。🏷️ 此作品为学生汽车网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常......
html简单网页代码： HTML+CSS保时捷汽车介绍（汽车主题）
01-09 520
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
HTML5汽车介绍网页设计模板 - 梦幻特斯拉
"该资源是一个HTML5网页设计模板，用于汽车介绍，特别是特斯拉品牌，适合学生作为期末大作业或课程设计使用。模板采用DIV+CSS布局，包含多个页面，具有丰富的CSS排版，颜色鲜明，顶部导航和底部背景色全宽。页面中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

fo安方

觉得俺的文章还行，感谢打赏，爱

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值