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%,black 86%,gray 94%,black)
}
.delorean .fixture .part4 {
	position:absolute;
	width:3%;
	height:9%;
	right:17.8%;
	top:43.8%;
	transform:rotate(-5deg);
	background-image:radial-gradient(circle at 0 100%,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 .part5 {
	position:absolute;
	width:2%;
	height:23%;
	right:17%;
	top:52.7%;
	transform:rotate(-11deg);
	background-image:linear-gradient(90deg,black,gray 9%,black 14%,rgba(0,0,0,0.3) 15%,85%,black 86%,gray 94%,black)
}
.delorean .windows .windshield {
	position:absolute;
	background-image:linear-gradient(95deg,transparent 30%,black 50%,#d9e3e1 60%);
	width:1%;
	height:39%;
	top:17%;
	left:40%;
	border-radius:0 0 6vmin 2vmin;
	transform:rotate(64deg);
	border-bottom:.3vmin solid black;
	border-right:.3vmin solid black
}
.delorean .windows .front {
	position:absolute;
	border:.3vmin solid black;
	border-left-color:transparent;
	width:12.5%;
	height:15%;
	top:30%;
	left:49%;
	transform:rotate(-2deg);
	border-radius:0 14% 14% 0;
	background-image:linear-gradient(#6e6e6e 55%,#d9dde3 62%)
}
.delorean .windows .front::after {
	position:absolute;
	content:"";
	border:.3vmin solid black;
	border-left-width:.8vmin;
	border-top-color:black;
	border-right-color:transparent;
	width:92%;
	height:100%;
	left:-56%;
	top:-5%;
	transform:skewX(-63deg);
	background-image:linear-gradient(#6e6e6e 55%,#d9dde3 62%);
	border-radius:0 0 0 20%
}
.delorean .windows .back {
	position:absolute;
	border:.3vmin solid black;
	border-top-color:transparent;
	width:16%;
	height:3%;
	right:15.5%;
	top:40%;
	transform:rotate(-1deg) skewX(10deg);
	border-radius:0 0 1vmin 1vmin;
	background:#d9dde3
}
.delorean .windows .back::before {
	position:absolute;
	content:"";
	width:70%;
	height:120%;
	top:-117%;
	left:-0.3vmin;
	border-left:.3vmin solid black;
	background:#d9dde3
}
.delorean .windows .back::after {
	position:absolute;
	content:"";
	width:102%;
	border-top:.3vmin solid black;
	border-left:.3vmin solid black;
	height:340%;
	top:-222%;
	left:-0.3vmin;
	transform:skewY(14deg);
	border-radius:1vmin 0 0 0;
	background-image:linear-gradient(168deg,#6e6e6e 40%,#d9dde3 48%,48%,transparent 50%)
}
.delorean .windows .containers {
	opacity:.5;
	position:absolute;
	overflow:hidden;
	height:12%;
	right:16%;
	top:32.5%;
	width:16%;
	transform:rotate(-1deg);
	border-radius:0 0 .1vmin .5vmin
}
.delorean .windows .containers .base {
	position:absolute;
	width:120%;
	height:61%;
	background:black;
	top:74%;
	transform:rotate(4deg);
	right:0
}
.delorean .windows .containers .container {
	position:absolute;
	background-image:linear-gradient(90deg,#580c0c 30%,#ff7d7d 51%,70%,#bb1010 80%);
	transform:rotate(3deg);
	border-radius:.3vmin .3vmin 0 0;
	box-shadow:inset 0 0 .1vmin .1vmin #620202,inset 0 0 .1vmin .2vmin #e17979
}
.delorean .windows .containers .container.a {
	width:12%;
	height:64%;
	top:25%;
	right:82%
}
.delorean .windows .containers .container.b {
	width:12%;
	height:64%;
	top:25%;
	right:68%
}
.delorean .windows .containers .container.c {
	width:12%;
	height:64%;
	top:25%;
	right:54%
}
.delorean .windows .containers .container.d {
	width:14%;
	height:64%;
	top:45%;
	right:77%
}
.delorean .windows .containers .container.e {
	width:14%;
	height:64%;
	top:45%;
	right:60%
}
.........完整代码请登录后点击上方下载按钮下载查看