jujugk
script
<script>
//Inspired by
//https://dribbble.com/shots/2557423-Sajha-Bus
//Anjhero-https://dribbble.com/anjhero
</script>
<!doctype html>
<div class="main-wrapper">
<div class="bus-wrapper">
<div class="window-section">
<div class="window-glass">
<div class="glass-inner">
<div class="seats"></div>
</div>
</div>
<div class="window-glass">
<div class="glass-inner">
<div class="seats first"></div>
<div class="seats second"></div>
</div>
</div>
<div class="window-glass">
<div class="glass-inner">
<div class="seats first"></div>
<div class="seats second"></div>
</div>
</div>
<div class="window-glass">
<div class="glass-inner">
<div class="seats first"></div>
<div class="seats second"></div>
</div>
</div>
<div class="window-glass">
<div class="glass-inner">
<div class="seats first"></div>
<div class="seats second"></div>
</div>
</div>
<div class="window-glass">
<div class="glass-inner">
<div class="seats first"></div>
<div class="seats second"></div>
</div>
</div>
</div>
<div class="driver-section">
<div class="window-glass">
<div class="glass-inner">
<div class="handle"></div>
</div>
</div>
</div>
<div class="headlight-wrap">
<span></span>
<span></span>
<span></span>
</div>
<div class="door-lower">
<div class="dot1"></div>
<div class="dot2"></div>
</div>
<div class="lower-shape"></div>
<div class="sticker-wrap">
<img src="http://res.cloudinary.com/dcprb72lp/image/upload/v1461732875/sticker_n8voco.png" />
</div>
<div class="border-wrap">
<span></span>
<span></span>
<span></span>
</div>
<div class="tyres-wrapper">
<div class="tyres-content">
<div class="tyres">
<div class="rim-section">
<div class="stripe"></div>
</div>
</div>
</div>
<div class="tyres-content">
<div class="tyres">
<div class="rim-section">
<div class="stripe"></div>
</div>
</div>
</div>
</div>
<div class="lights-wrap">
<div class="lights-1"></div>
<div class="lights lights-2"></div>
<div class="lights lights-3"></div>
<div class="lights lights-4"></div>
<div class="lights lights-5"></div>
</div>
<div class="square-1"></div>
<div class="square-2">
<div></div>
</div>
<div class="square-3">
<div></div>
</div>
</div>
<div class="shadow"></div>
<div class="road">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
<style>
*, *:after, *:before {
box-sizing: border-box;
}
body {
overflow-x: hidden;
}
.bus-wrapper {
background: #49D64E;
width: 700px;
height: 205px;
border-radius: 4px;
margin: 300px auto 0;
position: relative;
animation: bus-bounce .75s linear infinite;
}
.bus-wrapper:before {
content: "";
position: absolute;
left: -12px;
width: 0;
height: 0;
border-top: 103px solid transparent;
border-bottom: 103px solid transparent;
border-right: 12px solid #49D64E;
}
.bus-wrapper:after {
content: "";
position: absolute;
right: -18px;
top: 0;
width: 0;
height: 0;
border-top: 163px solid transparent;
border-bottom: 40px solid transparent;
border-left: 18px solid #49D64E;
}
.lower-shape {
position: absolute;
width: 0;
left: -22px;
height: 0;
bottom: 0;
border-left: 20px solid transparent;
border-right: 90px solid transparent;
border-bottom: 15px solid white;
}
.window-section {
width: 607px;
height: 80px;
display: inline-block;
border-radius: 6px;
background: #2E4148;
margin-top: 15px;
margin-left: 24px;
padding-left: 21px;
}
.window-glass {
width: 95px;
height: 58px;
background: #30B0C9;
margin-right: 10px;
border-radius: 4px;
margin: 11px 10px 11px 0;
float: left;
overflow: hidden;
}
.window-glass:nth-child(1) {
width: 50px;
}
.window-glass:nth-child(2) .glass-inner .seats.second, .window-glass:nth-child(3) .glass-inner .seats.second, .window-glass:nth-child(4) .glass-inner .seats.second {
left: 45px;
}
.window-glass:nth-child(4) .glass-inner {
margin-left: 0;
}
.window-glass:nth-child(5) .glass-inner {
margin-left: -8px;
}
.window-glass:nth-child(5) .glass-inner .seats.first {
left: 15px;
}
.window-glass:nth-child(5) .glass-inner .seats.second {
left: 50px;
}
.window-glass:nth-child(6) .glass-inner {
margin-left: -15px;
}
.window-glass:nth-child(6) .glass-inner .seats.first {
left: 25px;
}
.window-glass:nth-child(6) .glass-inner .seats.second {
display: none;
}
.glass-inner {
width: 95px;
height: 58px;
background: #59BFD3;
margin-top: 11px;
margin-left: 15px;
border-radius: 4px;
position: relative;
}
.seats {
width: 9px;
height: 13px;
background: rgba(255, 255, 255, 0.3);
transform: skewX(9deg);
border-radius: 2px;
position: absolute;
bottom: 10px;
left: 6px;
}
.tyres-wrapper {
position: relative;
top: 40%;
}
.tyres-wrapper .tyres-content:nth-child(1) {
position: absolute;
left: 28%;
position: absolute;
bottom: -65px;
left: 27%;
border-radius: 90px 90px 0 0;
-moz-border-radius: 90px 90px 0 0;
-webkit-border-radius: 90px 90px 0 0;
background: white;
padding: 10px;
}
.tyres-wrapper .tyres-content:nth-child(2) {
position: absolute;
bottom: -65px;
right: 9%;
border-radius: 90px 90px 0 0;
-moz-border-radius: 90px 90px 0 0;
-webkit-border-radius: 90px 90px 0 0;
background: white;
padding: 10px;
}
.tyres {
position: relative;
z-index: 1;
width: 73px;
height: 73px;
background: #4E5066;
border-radius: 50%;
border: 8px solid #3A3E4B;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
animation: stripe 1s linear infinite;
}
.rim-section {
position: relative;
width: 35px;
height: 35px;
background: #37A13A;
border-radius: 50%;
border: 11px solid #49D64E;
}
.stripe {
width: 25px;
position: absolute;
height: 25px;
border: 2px dashed #4E5066;
border-radius: 50%;
top: -6px;
left: -6px;
animation: stripe 1s linear infinite;
}
.sticker-wrap {
position: absolute;
right: 80px;
top: 110px;
z-index: 1;
}
.border-wrap {
position: absolute;
bottom: 18px;
left: 30px;
}
.border-wrap > span {
width: 543px;
height: 4px;
background: #fff;
display: block;
margin-bottom: 3px;
}
.border-wrap > span:last-child {
margin-bottom: 0;
}
.driver-section {
background: #2E4148;
overflow: visible;
width: 70px;
border-radius: 4px;
padding: 10px;
position: absolute;
right: 5px;
top: 15px;
padding-right: 0;
}
.driver-section:after {
content: "";
display: inline-block;
position: absolute;
width: 15px;
height: calc(100% + -2px);
background: #2E4148;
float: right;
right: -6px;
top: 2px;
z-index: 10;
-ms-transform: skew(-30deg, 0deg);
-webkit-transform: skew(-30deg, 0deg);
transform: skew(7deg, 0deg);
}
.driver-section .window-glass {
width: 60px;
}
.driver-section .glass-inner {
margin-left: -57px;
margin-top: -5px;
height: 70px;
transform: skewX(8deg);
}
.driver-section .handle {
width: 30px;
height: 3px;
background: rgba(255, 255, 255, 0.3);
transform: rotate(-20deg);
border-radius: 2px;
position: absolute;
bottom: 10px;
right: 15px;
}
.door-lower {
width: 82px;
height: 48px;
position: absolute;
border: 4px solid #2E4148;
top: 110px;
right: -7px;
z-index: 1;
border-radius: 4px;
}
.door-lower .dot1 {
width: 10px;
height: 4px;
background: #3A3E4B;
border-radius: 4px;
margin-top: 8px;
margin-left: 7px;
}
.door-lower .dot2 {
width: 20px;
height: 20px;
background: #3A3E4B;
float: right;
margin-right: 7px;
border-radius: 2px;
margin-top: -3px;
}
.lights-wrap .lights-1 {
background: #CC8460;
box-shadow: 1px 2px 0px 0px rgba(0, 0, 0, 0.5);
border-radius: 4px;
width: 8px;
height: 28px;
position: absolute;
bottom: 43px;
left: -5px;
animation: changeColor 0.5s infinite;
}
.lights-wrap .lights {
background: #CC8460;
box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.5);
border-radius: 5px;
width: 8px;
height: 3px;
position: absolute;
bottom: 43px;
z-index: 1;
animation: changeColor 0.5s infinite;
}
.lights-wrap .lights.lights-2 {
left: 50px;
}
.lights-wrap .lights.lights-3 {
left: 189px;
}
.lights-wrap .lights.lights-4 {
left: 395px;
}
.lights-wrap .lights.lights-5 {
right: 165px;
}
.square-1 {
background: #DEDEDE;
border: 2px solid #2E4148;
box-shadow: inset 2px 6px 2px 0px rgba(0, 0, 0, 0.5);
border-radius: 4px;
position: absolute;
width: 14px;
height: 14px;
left: 50px;
top: 105px;
}
.square-2 {
width: 20px;
height: 20px;
border: 1px solid rgba(58, 62, 75, 0.1);
border-radius: 6px;
padding: 0px;
display: inline-block;
text-align: center;
position: absolute;
right: 5px;
bottom: 21px;
}
.square-2 > div {
width: 12px;
height: 10px;
background: #3A3E4B;
display: inline-block;
border-radius: 1px;
}
.square-3 {
width: 20px;
height: 20px;
border: 1px solid rgba(58, 62, 75, 0.1);
border-radius: 6px;
padding: 0px;
display: inline-block;
text-align: center;
position: absolute;
right: 35px;
bottom: 5px;
}
.square-3 > div {
width: 12px;
height: 10px;
background: #3A3E4B;
display: inline-block;
border-radius: 1px;
}
.shadow {
background: #D8D8D8;
border-radius: 8px;
width: 663px;
height: 14px;
margin: 25px auto 0;
position: relative;
}
.headlight-wrap {
position: absolute;
right: -17px;
bottom: 66px;
z-index: 1;
}
.headlight-wrap > span {
width: 8px;
height: 2px;
background: #fff;
display: block;
margin-bottom: 1px;
}
.road {
width: 200%;
margin-top: -7px;
position: relative;
z-index: 1;
animation: mov-road 3s linear infinite;
overflow: hidden;
}
.road .line {
float: left;
}
.road .line:nth-child(1) {
width: 10px;
height: 6px;
background: #3A3E4B;
border-radius: 4px;
margin-left: 80px;
margin-right: 20px;
}
.road .line:nth-child(2) {
width: 20px;
height: 6px;
background: #3A3E4B;
border-radius: 4px;
margin-right: 150px;
}
.road .line:nth-child(3) {
width: 200px;
height: 6px;
background: #3A3E4B;
border-radius: 4px;
margin-right: 80px;
}
.road .line:nth-child(4) {
width: 200px;
height: 6px;
background: #3A3E4B;
border-radius: 4px;
margin-right: 180px;
}
.road .line:nth-child(5) {
width: 150px;
height: 6px;
background: #3A3E4B;
border-radius: 4px;
margin-right: 300px;
}
.road .line:nth-child(6) {
width: 200px;
height: 6px;
background: #3A3E4B;
border-radius: 4px;
}
.road .line:nth-child(7) {
width: 10px;
height: 6px;
background: #3A3E4B;
border-radius: 4px;
margin-left: 80px;
margin-right: 20px;
}
.road .line:nth-child(8) {
width: 20px;
height: 6px;
background: #3A3E4B;
border-radius: 4px;
margin-right: 150px;
}
@keyframes changeColor {
0% {
background-color: #CC8460;
}
50% {
background-color: orange;
}
100% {
background-color: #FFC107;
}
}
@keyframes stripe {
0% {
-moz-transform: rotateZ(0deg);
-webkit-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
}
0% {
-moz-transform: rotateZ(180deg);
-webkit-transform: rotateZ(180deg);
-o-transform: rotateZ(180deg);
-ms-transform: rotateZ(180deg);
}
100% {
-moz-transform: rotateZ(360deg);
-webkit-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
}
}
@keyframes bus-bounce {
0% {
top: 2px;
}
20% {
top: 1px;
}
40% {
top: 2px;
}
75% {
top: 0px;
}
100% {
top: 2px;
}
}
@keyframes mov-road {
0% {
left: 1500px;
}
100% {
left: -1500px;
}
}
</style>
</!doctype>
