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

div+css布局绘制跑车轿车效果代码

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看