div+css布局绘制跑车轿车效果代码-html代码-BFW代码库

代码语言：html
代码描述：div+css布局绘制跑车轿车效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
    body,html {
        width:100%;
        height:100%
}
body {
        display:flex;
        align-items:center;
        justify-content:center;
        background-image:radial-gradient(circle,#c9c0c3,#212026)
}
.delorean {
        width:95vmin;
        height:35vmin;
        position:relative
}
.delorean .shadow {
        position:absolute;
        width:69%;
        bottom:10%;
        height:20%;
        left:15%;
        border-radius:15vmin;
        background-image:linear-gradient(90deg,transparent,black 10%,90%,transparent);
        transform:perspective(88px) rotateX(217deg)
}
.delorean .shadow::after {
        position:absolute;
        content:"";
        background:linear-gradient(90deg,transparent,rgba(52,51,54,0.24) 20%,80%,transparent);
        width:80%;
        height:100%;
        bottom:18%;
        left:10%;
        border-radius:5vmin
}
.delorean .arrow {
        --color:#c9c8d1;
        position:absolute;
        background:var(--color);
        height:40%;
        width:18%;
        opacity:.5;
        left:30%;
        top:3%;
        transform:skewX(-26deg)
}
.delorean .arrow::before {
        position:absolute;
        content:"";
        width:100%;
        height:100%;
        right:-105%;
        background-image:linear-gradient(90deg,var(--color) 26%,transparent 27%,32%,var(--color) 32%,53%,transparent 53%,58%,var(--color) 58%,76%,transparent 76%,82%,var(--color) 82%,90%,transparent 90%)
}
.delorean .arrow::after {
        position:absolute;
        content:"";
        border:7vmin solid transparent;
        left:-90%;
        border-right:14vmin solid var(--color);
        border-left-width:0;
        transform:scale(1.3)
}
.delorean .burners .tank {
        position:absolute;
        width:2.8%;
        height:12%;
        top:9%;
        right:20%;
        background-image:linear-gradient(90deg,#6a6a6a 10%,white 51%,85%,#858585 90%);
        transform:rotate(3deg);
        border-radius:.3vmin .3vmin 0 0;
        box-shadow:inset 0 0 .1vmin .1vmin black,inset 0 0 .1vmin .2vmin white
}
.delorean .burners .tank::before {
        position:absolute;
        content:"";
        width:114%;
        height:57%;
        bottom:-42%;
        right:-3%;
        background-image:linear-gradient(90deg,#6a6a6a 10%,white 51%,85%,#858585 90%);
        border-radius:.3vmin .3vmin 0 0;
        box-shadow:inset 0 0 .1vmin .1vmin black,inset 0 0 .1vmin .2vmin white;
        transform:perspective(32px) rotateX(50deg)
}
.delorean .burners .tank::after {
        position:absolute;
        content:"";
        width:167%;
        height:88%;
        bottom:-123%;
        right:-32%;
        background-image:linear-gradient(90deg,#202020 10%,#4e4e4e 51%,85%,#1a1a1a 90%);
        border-radius:.3vmin .3vmin 0 0;
        box-shadow:inset 0 0 .1vmin .1vmin black,inset 0 0 .1vmin .2vmin #7a7a7a
}
.delorean .burners .burner {
        position:absolute;
        background:#0d1311
}
.delorean .burners .burner::before {
        position:absolute;
        content:"";
        width:75%;
        height:171%;
        background:#0d1311;
        top:-85%;
        transform:rotateZ(340deg) skewY(347deg);
        left:23%;
        border-radius:0 2vmin 0 0
}
.delorean .burners .burner::after {
        position:absolute;
        content:"";
        width:75%;
        height:42%;
        background-image:repeating-linear-gradient(34deg,gray 5%,black 6%,9%,gray 10%);
        top:-69%;
        transform:rotateZ(340deg) skewY(347deg);
        left:16%;
        border-radius:0 2vmin 0 0
}
.delorean .burners .burner.left {
        width:15%;
        height:11%;
        right:10%;
        top:33%;
        transform:skewX(-10deg);
        border-radius:0 0 1vmin 0
}
.delorean .burners .burner.right {
        width:14%;
        height:10%;
        right:13%;
        top:33%
}
.delorean .burners .wire {
        position:absolute;
        background:repeating-conic-gradient(at 50% 133%,#29272c 0,0.5%,transparent .5%,transparent 1%),radial-gradient(at 50% 50%,white -6%,#444 24%,46%,white 57%,gray 60%,69%,black 72%);
        border-radius:50%;
        transform:rotate(12deg)
}
.delorean .burners .wire.a {
        width:8%;
        height:15%;
        top:24%;
        right:26%
}
.delorean .burners .wire.b {
        width:10%;
        height:17%;
        top:25%;
        right:21%
}
.delorean .body {
        position:absolute;
        left:7%;
        right:9%;
        top:27%;
        bottom:18%
}
.delorean .body .part1 {
        position:absolute;
        background-image:linear-gradient(184deg,#e7e7e7,#b9b9b9 10%,#e7e7e7 30%);
        width:31%;
        height:36%;
        left:4%;
        top:34%;
        transform:rotate(-7deg);
        border-radius:33%
}
.delorean .body .part2 {
        position:absolute;
        background-image:linear-gradient(185deg,#e7e7e7,#b2b4b5 10%,#e7e7e7 37%);
        width:21%;
        height:39%;
        left:30%;
        top:16%;
        transform:rotate(-20deg);
        border-radius:5%
}
.delorean .body .part3 {
        position:absolute;
        background-image:linear-gradient(180deg,#e7e7e7,#b2b4b5 10%,#e7e7e7 30%);
        width:27%;
        height:36%;
        right:4%;
        top:12%;
        transform:rotate(13deg);
        border-radius:5%
}
.delorean .body .part4 {
        position:absolute;
        background-image:linear-gradient(#e7e7e7,#b2b4b5 10%,#e7e7e7 70%);
        width:24%;
        height:42%;
        right:28%;
        top:0;
        transform:rotate(-2deg);
        border-radius:10%
}
.delorean .body .part5 {
        background:linear-gradient(#e7e7e7 27%,#979797 28%,#283231 33%,40%,#72787a 41%,67%,#a5a5a5 70%);
        position:absolute;
        top:40%;
        left:6%;
        height:50%;
        width:90%;
        transform:rotate(-2deg)
}
.delorean .body .part6 {
        position:absolute;
        background-image:linear-gradient(#787878 20%,#283231 25%);
        bottom:0;
        left:16%;
        height:12%;
        width:60%
}
.delorean .body .part7 {
        position:absolute;
        right:2%;
        height:26%;
        width:3%;
        top:23%;
        transform:rotate(-5deg);
        border-radius:0 41% 0 0;
        background-image:linear-gradient(200deg,transparent 10%,#283231 11%)
}
.delorean .body .part8 {
        position:absolute;
        right:1%;
        height:30%;
        width:4.5%;
        top:48%;
        transform:rotate(12deg);
        border-radius:0 20% 0 0;
        background-image:linear-gradient(-20deg,transparent 10%,#283231 11%)
}
.delorean .body .part9 {
        position:absolute;
        right:2%;
        height:12%;
        width:15%;
        bottom:10%;
        transform:rotate(-11deg);
        border-radius:0 0 40% 0;
        background-image:linear-gradient(-60deg,transparent 10%,#283231 11%)
}
.delorean .fixture .top {
        position:absolute;
        width:4%;
        height:4%;
        top:22.5%;
        right:34%;
        background-image:linear-gradient(90deg,#202020 10%,#4e4e4e 51%,85%,#1a1a1a 90%);
        border-radius:.3vmin .3vmin 0 0;
        box-shadow:inset 0 0 .1vmin .1vmin black,inset 0 0 .1vmin .2vmin #7a7a7a;
        transform:rotate(-1deg)
}
.delorean .fixture .part1 {
        position:absolute;
        width:2%;
        height:20%;
        right:34%;
        top:25%;
        transform:rotate(-5deg);
        background-image:linear-gradient(90deg,black,gray 9%,black 14%,rgba(0,0,0,0.3) 15%,85%,black 86%,gray 94%,black)
}
.delorean .fixture .part2 {
        position:absolute;
        width:3%;
        height:9%;
        right:32.7%;
        top:44.8%;
        transform:rotate(-4deg);
        background-image:radial-gradient(circle at 100% 0,transparent 17%,black 18%,gray 20%,black 24%,rgba(0,0,0,0.3) 25%,55%,black 56%,gray 59%,black,transparent 63%)
}
.delorean .fixture .part3 {
        position:absolute;
        width:12%;
        height:5.5%;
        right:20.7%;
        top:46.2%;
        transform:rotate(-2deg);
        background-image:linear-gradient(0deg,black,gray 9%,black 14%,rgba(0,0,0,0.3) 15%,85.........完整代码请登录后点击上方下载按钮下载查看