◆◆0

[练习]用html+CSS画个橘色小车图案

Zanyxd 2018年11月10日网站相关, 设计相关 1,629 0

不是很好看，见谅QuQ
html部分

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>软件2班36</title>
<link href="car.css" rel="stylesheet" type="text/css">
</head>

<body>
	<section>
		<div id="boxx">
			<div id="window"></div><!--车窗-->
			<div id="car_body"></div><!--车身-->
			<div id="wheel"></div><!--轮子-->
		</div>
	</section>
</body>
</html>

css部分

@charset "utf-8";
/* CSS Document */
html,body{
	height:100%;
	margin:0px;
}
/*背景色*/
section{
	position: relative;
	height: 100%;
	background-image: linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%);
}
#boxx{
	border-radius: 15px;
	position: absolute;
	margin-top: -250px;
	margin-left: -400px;
	top: 50%;
	left: 50%;
	width: 800px;
	height: 500px;
	background: rgba(255,255,255,0.4);
}
#car_body{
	position: absolute;
	width: 600px;
	height: 150px;
	background: orange;
	border-bottom: 30px solid rgba(147,147,147,1.00);
	border-radius: 15% 15% 0 0/70% 70% 0 0;
	left: 100px;
	top: 200px;
	z-index: 2;
}
#car_body:before{
	content: '';
	display: inline-block;
	width: 40px;
	height: 70px;
	background: yellow;
	border-radius: 30%;
	margin-left: 30px;
	margin-top: 62px;
}
#car_body:after{
	content: 'ZYS';
	display: flex;
	font-weight: 900;
	font-size: 40px;
	color: white;
	margin-left: 460px;
	margin-top: -100px;
}
#window{
	position: absolute;
	width: 280px;
	height: 150px;
	background: rgba(211,211,211,1.00);
	border-radius: 20% 20% 0 0/80% 80% 0 0;
	border: 30px solid orange;
	left: 230px;
	top: 22px;
	z-index: 3;
}
#window:after{
	content: '';
	display: inline-block;
	width: 30px;
	height: 150px;
	margin-left: 125px;
	background: orange;
}
/*车轮*/
#wheel,#wheel:after{
	position: absolute;
	width: 60px;
	height: 60px;
	border-radius: 100%;
	border: 30px solid;
	background: white;
	z-index: 5;
}
#wheel{
	left: 200px;
	top: 325px;
}
#wheel:after{
	content: '';
	display: inline-block;
	margin-left: 250px;
	margin-top: -33px;
}

声明：本文为原创，作者为 Zanyxd，转载时请保留本声明及附带文章链接：https://blog.bugcola.com/note/index.php/172/

返回顶部