<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 绘制的奔驰牌大巴车/公交车</title>
<link rel="stylesheet" href="css/main.css">
<link href='https://fonts.useso.com/css?family=Orbitron:900' rel='stylesheet' type='text/css'>
<style>
* {
font-family: 'Orbitron', sans-serif;
font-weight: 900;
}
html,
body {
padding: 0;
margin: 0;
}
body {
margin-top: 50px;
background-repeat: no-repeat;
background-size: 400px;
background-position-y: 50px;
width: 100%;
background: lightgray;
}
.wrapp {
width: 400px;
height: 600px;
position: relative;
margin-left: 50px;
margin: 0 auto;
}
.carroceria {
width: 392px;
height: 314px;
background: #ad4221;
position: absolute;
top: 51px;
left: 3px;
}
.carroceria2 {
width: 392px;
height: 3px;
background: #c9bc77;
position: absolute;
top: 218px;
left: 3px;
}
.carroceria3 {
width: 392px;
height: 80px;
background: #c9bc77;
position: absolute;
top: 226px;
left: 3px;
}
.head {
width: 400px;
height: 21px;
background: #c9bc77;
position: absolute;
top: 31px;
z-index: 1;
}
.head2 {
width: 400px;
height: 94px;
background: #c9bc77;
position: absolute;
top: -17px;
border-radius: 50%;
z-index: 1;
}
.head4 {
width: 400px;
height: 35px;
background: black;
position: absolute;
top: 38px;
border-radius: 50%;
z-index: 3;
}
.head5 {
width: 390px;
height: 35px;
background: #ad4221;
position: absolute;
top: 43px;
border-radius: 50%;
z-index: 4;
left: 3px;
}
.head3 {
width: 392px;
height: 6px;
background: black;
position: absolute;
top: 55px;
left: 3px;
z-index: 1;
}
.wvent {
position: absolute;
z-index: 4;
width: 400px;
top: 41px;
height: 200px;
overflow: hidden;
border-radius: 50% / 10%;
text-align: center;
text-indent: 0.1em;
}
.wvent:before {
content: '';
position: absolute;
top: 10%;
bottom: 10%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}
.ventanaleft {
width: 185px;
height: 145px;
border: solid 3px black;
border-radius: 20px;
transform: skew(0deg, -5deg);
position: absolute;
top: -10px;
left: 3px;
background: #2a2930;
overflow: hidden;
}
.ventanaright {
width: 185px;
height: 145px;
border: solid 3px black;
border-radius: 20px;
position: absolute;
transform: skew(0deg, 5deg);
top: -10px;
right: 5px;
background: #2a2930;
overflow: hidden;
}
.tapamotor {
background: #a5380e;
width: 262px;
height: 80px;
position: absolute;
top: 199px;
left: 70px;
border-radius: 20px 20px 0px 0px;
}
.tapain {
width: 218px;
height: 30px;
background: #49887c;
margin: 0 auto;
position: absolute;
top: 221px;
border-radius: 10px 10px 0px 0px;
z-index: 2;
left: 92px;
}
.tapain2 {
width: 254px;
height: 23px;
background: #49887c;
margin: 0 auto;
position: absolute;
top: 239px;
border-radius: 10px 10px 0px 0px;
z-index: 2;
left: 74px;
}
.wlog {
position: absolute;
top: 228px;
left: 188px;
z-index: 3;
width: 25px;
background: red;
height: 25px;
border-radius: 50%;
border: solid 1px white;
}
.triangle {
width: 0;
height: 0;
border-top: 2px solid transparent;
border-right: 13px solid white;
border-bottom: 2px solid transparent;
transform: rotate(90deg);
left: 6.3px;
position: absolute;
top: 6px;
}
.triangle2 {
width: 0;
height: 0;
border-top: 2px solid transparent;
border-right: 13px solid white;
border-bottom: 2px solid transparent;
transform: rotate(-28deg);
position: absolute;
top: 15px;
}
.triangle3 {
width: 0;
height: 0;
border-top: 2px solid transparent;
border-right: 13px solid white;
border-bottom: 2px solid transparent;
position: absolute;
top: 15px;
transform: rotate(-150deg);
left: 12px;
}
.efaro {
height: 100px;
width: 343px;
position: absolute;
top: 266px;
left: 28px;
border-radius: 10px 10px 0px 0px;
background: #a5380e;
z-index: 10;
}
.wfaros {
width: 311px;
height: 70px;
border-radius: 50px;
border: solid 1px black;
position: absolute;
top: 13px;
left: 15px;
background: black;
}
.faro1,
.faro2 {
border-radius: 50%;
height: 44px;
width: 44px;
background: #919090;
border: solid 6px #6d6d6d;
position: absolute;
top: 7px;
z-index: 15;
}
.faro1 {
left: 10px;
}
.faro2 {
right: 10px;
}
.guardabarros1,
.guardabarros2 {
width: 40px;
height: 80px;
position: absolute;
top: 285px;
border-radius: 10px 10px 0px 0px;
background: #ad4221;
}
.guardabarros1 {
left: -4px;
}
.guardabarros2 {
right: -4px;
}
.paragolpe {
width: 420px;
height: 35px;
position: absolute;
top: 360px;
background: black;
left: -10px;
border-radius: 4px;
z-index: 12;
}
.estira {
height: 14px;
width: 81px;
background: #333;
position: absolute;
top: 10px;
left: 161px;
border-radius: 10px;
}
.rueda1,
.rueda2 {
width: 63px;
height: 72px;
background: black;
position: absolute;
top: 385px;
border-radius: 10px;
}
.rueda1 {
left: 14px;
}
.rueda2 {
right: 14px;
}
.wmarca1 {
z-index: 10;
position: absolute;
height: 50px;
width: 110px;
top: 3px;
left: 10px;
}
.wmarca2 {
z-index: 10;
position: absolute;
height: 50px;
width: 110px;
top: 3px;
right: 10px;
}
.mrk1,
.mrk2,
.mrk3,
.mrk4 {
background: #ad4221;
}
.mrk1 {
width: 90px;
height: 13px;
transform: skew(0deg, -10deg);
position: absolute;
top: 20px;
}
.mrk2 {
width: 30px;
height: 23px;
transform: skew(-8deg, -10deg);
position: absolute;
top: 1px;
right: 0;
}
.mrk3 {
width: 90px;
height: 13px;
transform: skew(0deg, 10deg);
position: absolute;
top: 20px;
right: 0;
}
.mrk4 {
width: 30px;
height: 23px;
transform: skew(3deg, 10deg);
position: absolute;
top: 1px;
left: 0;
}
.wcart {
position: absolute;
z-index: 10;
width: 131px;
height: 40px;
background: #fff;
border: solid 4px black;
border-radius: 20px;
left: 133px;
top: -7px;
text-align: center;
padding-top: 7px;
box-sizing: border-box;
}
p {
padding: 0;
margin: 0;
text-align: center;
font-size: 24px;
}
.parrilla {
width: 222px;
height: 1.5px;
background: lightseagreen;
opacity: 0.2;
left: 70px;
margin: 3px auto 0px auto;
}
.fp {
margin-top: 11px;
}
.parasol1 {
height: 38px;
background: red;
width: 100%;
margin-top: 9px;
padding-top: 9px;
}
.parasol1 p {
font-size: 24px;
/* FF3.6+ */
background: -moz-linear-gradient(top, white 43%, #effc62 99%);
/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(43%, white), color-stop(99%, #effc62));
/* Chrome10+,Safari5.1+ */
background: -webkit-linear-gradient(top, white 43%, #effc62 99%);
/* Opera 11.10+ */
background: -o-lin
CSS3 绘制的奔驰牌大巴车公交车效果源码.zip
版权申诉
150 浏览量
2022-10-31
01:48:33
上传
评论
收藏 3KB ZIP 举报
CSS3 绘制的奔驰牌大巴车公交车效果源码.zip （1个子文件） 
132687036759413797 
index.html 11KB资源评论
毕业_设计
- 粉丝: 1937
- 资源: 1万+
最新资源
- 爬取当当网图书数据并保存至本地Excel的Python实现
- html css js网页设计M-m笔记
- linux常用命令大全vaWeb-m笔记
- c语言文件读写操作代码CM-2023C-开发笔记
- vmware workstation pro 17 linux版
- 3479521_1710042575-1.rwmod
- 安装及环境配置UMCM-2023C-ma笔记
- (完整)数据库课程设计餐厅点餐说明书-21ab6d3c8beb172ded630b1c59eef8c75ebf952c.doc
- 2023-04-06-项目笔记 - 第一百五十四阶段 - 4.4.2.152全局变量的作用域-152 -2024.06.04
- 松哥解协议松哥解协议松哥解协议松哥解协议松哥解协议
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
