如何在css中使用transition来制作一辆驾驶卡车

Question

链接显示了不同形状的CSS代码，我想我需要矩形和圆形来制作一辆卡车。

https://css-tricks.com/the-shapes-of-css/

这是矩形的代码，我必须将矩形和圆形连接起来，因为卡车需要轮胎。所以现在我需要连接所有的零件，并使用代码制作一辆卡车。我还需要在悬停状态下来回移动卡车。

#rectangle {         
width: 200px;
height: 100px;
background: red;
}
#circle {
width: 100px;
height: 100px;
background: red;
border-radius: 50%
}

Answer 1

body{
width:500px;
margin:100px auto;
background: black;
}
#truck {
position:relative;  
width:212px;
}
.rect {
width:150px;
height:100px;
background:red;  
position:relative;  
}
.front {
position:absolute;
top:25px;
right:0;
background: red;
width:60px;
height:70px;

}
.bottom {
width: 212px;
background:red;
height:7px;
position:absolute;
bottom:-1px;

}
.window{
position:absolute;
background: black;
width:42px;
height:15px;
padding-bottom:10px;
top:18px;
left:7px;
}

.back_tyres,.mid_tyres,.front_tyres {
width:30px;
height:30px;
background:red;
border-radius:30px;
position:absolute;
border:2px solid black;
bottom:-15px;
z-index:1;
}
.back_tyres  {left:10px;}
.mid_tyres   {left:100px;}
.front_tyres {left:165px;}

<div id="truck">
<div class="rect"></div>
<div class="front">
<div class="window"></div>
<div class="f_hood"></div>
</div>
<div class="back_tyres"></div>
<div class="mid_tyres"></div>
<div class="front_tyres"></div>
<div class="bottom"></div>
</div>

我想这会和你想要的一样。

Answer 2

我相信您可以创建一个父div类和一些子div类。

<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
<div class="child4"></div>
<div class="child5"></div>
</div>

然后，在你的css中。你可以用一些圆形、矩形或任何你需要的东西来制作孩子的课堂，让它看起来像一辆卡车。

之后，在制作动画时，请确保将其应用于父类，这样它将移动您创建的整个卡车，并且不会影响单个形状(子元素(。

Answer 3

@import url(https://fonts.googleapis.com/css?family=Nosifer);
body
{
padding:0;
margin:0;
background:#fff;
overflow:hidden;
}
.truck
{
margin:100px 0 0 100px;
width:350px;
height:210px;
border:1px solid #fff;
position:absolute;
display:block;

}
.truck *{ position:absolute;}
.truck #truckBack{
display:block;
height: 115px;
width: 190px;

-webkit-border-radius:6px 6px 0 6px;
-moz-border-radius:6px 6px 0 6px;
-o-border-radius:6px 6px 0 6px;
-ms-border-radius:6px 6px 0 6px;
border-radius:6px 6px 0 6px;

border:1px solid #ddd;

background: rgb(252,255,244); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -moz-linear-gradient(top,  rgba(252,255,244,1) 0%, rgba(223,229,215,1) 40%, rgba(179,190,173,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,255,244,1)), color-stop(40%,rgba(223,229,215,1)), color-stop(100%,rgba(179,190,173,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(179,190,173,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(179,190,173,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(179,190,173,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(179,190,173,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 ); /* IE6-8 */
}
.truck #truckBack p{

font-family: 'Segoe UI', cursive;
font-weight:bold;
font-size:26px;
color:#06F;
margin:10px 20px 10px 10px;
display:block;
text-align:center;
}
.truck #truckFront{
border-bottom: 95px solid #06F;
border-right: 50px solid transparent;
height: 0;
width: 70px;
margin:20px 0 0 190px;
}
.truck #truckFront::before{
content:'';
height:7px;
width: 20px;
margin:50px 0 0 15px;
z-index:2000;
background-color:#000;
position:absolute;

border-radius:6px;
-moz-border-radius:6px;
-o-border-radius:6px;
-ms-border-radius:6px;
-webkit-border-radius:6px;
}
.truck #truckBumper{
height: 45px;
width: 70px;
background-color:#06F; 
margin:70px 0 0 240px;
}
.truck #truckBumper::after{
content:'';
height: 45px;
width: 75px;
background-color:#06F;
margin:-13px 0 0 -5px;
position:absolute;
}
.truck #truckFront #truckWindow{
border-bottom: 35px solid #000;
border-right: 18px solid transparent;
height:0;
width: 57px;
margin:5px 0 0 10px;
z-index:1000;

-webkit-border-radius:5px 0 0 0;
-moz-border-radius:5px 0 0 0;
-o-border-radius:5px 0 0 0;
-ms-border-radius:5px 0 0 0;
border-radius:5px 0 0 0;
}
.truck #truckFront #ForntBumper{
height:18px;
width: 30px;
margin:77px 0 0 95px;
z-index:1000;
background-color:#444;

border-radius:6px;
-moz-border-radius:6px;
-o-border-radius:6px;
-ms-border-radius:6px;
-webkit-border-radius:6px;

border:1px solid #333;

}
.truck #truckFront #ForntBumper::after{
content:'';
height:20px;
width: 10px;
margin:-21px 0 0 15px;
z-index:1000;
background-color:#CCC;
position:absolute;
border-radius:6px 0 0 0;
-moz-border-radius:6px 0 0 0;
-o-border-radius:6px 0 0 0;
-ms-border-radius:6px 0 0 0;
-webkit-border-radius:6px 0 0 0;

border-top:1px solid #888;
}
#rearWheel,#frontWheel
{
width:58px;
height:58px;
display:block;
background-color:#000;
z-index:2000;
border:1px dashed #fff;

-webkit-border-radius:58px;
-moz-border-radius:58px;
-o-border-radius:58px;
-ms-border-radius:58px;
border-radius:58px;
}
#frontWheel
{
margin:90px 0 0 235px;
}
#rearWheel
{
margin:90px 0 0 45px;
}
#innerWhite
{
width:36px;
height:36px;
-webkit-border-radius:36px;
-moz-border-radius:36px;
-o-border-radius:36px;
-ms-border-radius:36px;
border-radius:36px;
display:block;
background-color:#d3d3d3;
z-index:2000;   
margin:11px 0 0 12px;
}
#innerBlack
{
width:24px;
height:24px;
-webkit-border-radius:24px;
-moz-border-radius:24px;
-o-border-radius:24px;
-ms-border-radius:24px;
border-radius:24px;
display:block;
background-color:#000;
z-index:2000;   
margin:6px 0 0 6px;
}

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Css Truck</title>
</head>
<body>
<div class="truck">
<span id="truckBack">
<p>Loading Truck</p>
</span>
<span id="truckFront">
<span id="truckWindow"></span>
<span id="ForntBumper"></span>
</span>
<span id="truckBumper"></span>
<span id="frontWheel">
<span id="innerWhite">
<span id="innerBlack">
</span>
</span>
</span>
<span id="rearWheel">
<span id="wheelEffect"></span>
<span id="innerWhite">
<span id="innerBlack"></span>
</span>
</span>
</span>
</div>
</body>
</html>

我从一个网站上找到了这个解决方案，你也可以试试这个