使用CSS vw单位实现的响应式公交车

Responsive Buses with CSS VW unit。公交车，小汽车，班车。

html5, car, bus

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 4299
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.wrapper {
    background: #f4f2eb;
    background-color: #afc7c5;
    color: #555;
    font-size: 125%;
    /* 20px */
    
    padding-bottom: 6em;
}
.row:after {
    content: "";
    display: block;
    clear: both;
}
.col--half {
    float: left;
    vertical-align: top;
    width: 50%;
}
.col--third {
    float: left;
    vertical-align: top;
    width: 33.3%;
}
/* ==========================================
   Bus
   ========================================== */

.bus {
    background: transparent;
    /* Font size set to 5em so that 0.01em = 1px */
    
    font-size: 5em;
    height: 10em;
    margin: 1em auto;
    position: relative;
    width: 10em;
}
.bus--first {
    margin-top: 0;
}
.bus--full {
    font-size: 7vw;
}
.bus--half {
    font-size: 4vw;
}
.bus--third {
    font-size: 3vw;
}
.bus * {
    position: absolute;
}
/* ==========================================
   Body
   ========================================== */

.bus-body {
    height: 100%;
    width: 100%;
    z-index: 20;
}
.bus__body--top {
    background: #a9a4a2;
    position: absolute;
}
.bus__body--bottom {
    background: #a9a4a2;
    position: absolute;
}
/* Colors */

.bus--top-green .bus__body--top,
.bus--bottom-green .bus__body--bottom {
    background: #82a53d;
}
.bus--top-orange .bus__body--top,
.bus--bottom-orange .bus__body--bottom {
    background: #ee6615;
}
.bus--top-yellow .bus__body--top,
.bus--bottom-yellow .bus__body--bottom {
    background: #f7c125;
}
.bus--top-red .bus__body--top,
.bus--bottom-red .bus__body--bottom {
    background: #bb211a;
}
.bus--top-blue .bus__body--top,
.bus--bottom-blue .bus__body--bottom {
    background: #1f77b5;
}
.bus--top-tan .bus__body--top,
.bus--bottom-tan .bus__body--bottom {
    background: #c5b889;
}
.bus--top-white .bus__body--top,
.bus--bottom-white .bus__body--bottom {
    background: #e3e2d8;
}
.bus--top-brown .bus__body--top,
.bus--bottom-brown .bus__body--bottom {
    background: #684d43;
}
.roof {
    border-radius: 50% 50% 0 0 / 60% 60% 0 0;
    height: 1.4em;
    left: 1.76em;
    width: 6.48em;
    top: 1em;
}
.side-top {
    border-radius: 46% 46% 0 0 / 60% 60% 0 0;
    height: 2.24em;
    left: 1.31em;
    top: 1.67em;
    transform: rotate(11deg);
    width: 0.8em;
}
.side-top--right {
    left: auto;
    right: 1.31em;
    transform: rotate(-11deg);
}
.gutter {
    border-top-left-radius: 0.06em;
    height: 0.12em;
    left: 1.72em;
    top: 1.63em;
    transform: rotate(-45deg);
    width: 0.08em;
}
.gutter--right {
    border-top-left-radius: 0;
    border-top-right-radius: 0.06em;
    left: auto;
    right: 1.72em;
    transform: rotate(45deg);
}
.mid-top {
    height: 2em;
    left: 1.7em;
    top: 2em;
    width: 6.6em;
}
.bump {
    border-radius: 1.5% 1.5% 1.5% 1.5% / 50% 50% 50% 50%;
    box-shadow: inset 0 -0.18em 0 0 rgba(0, 0, 0, 0.15), inset 0 0.18em 0 0 rgba(255, 255, 255, 0.2);
    height: 0.36em;
    left: 1.08em;
    top: 3.83em;
    width: 7.84em;
    z-index: 20;
}
.front {
    border-radius: 2.5% 2.5% 3.5% 3.5% / 70% 70% 30% 30%;
    height: 4em;
    left: 1em;
    top: 4.1em;
    width: 8em;
}
.front-middle {
    border-radius: 20% 20% 0 0 / 100% 100% 0 0;
    box-shadow: 0 -0.04em 0 0 rgba(255, 255, 255, 0.2);
    left: 1.6em;
    height: 0.24em;
    top: 4.33em;
    width: 6.8em;
}
.front-middle--bottom {
    border-radius: 0 0 0.9em 0.9em;
    box-shadow: 0 0.04em 0 0 rgba(0, 0, 0, 0.15);
    left: 1.5em;
    height: 1em;
    top: 6.1em;
    width: 7em;
}
.grill {
    border-radius: 0.06em;
    box-shadow: inset 0 -0.03em 0 0 rgba(0, 0, 0, 0.15), inset 0 0.03em 0 0 rgba(255, 255, 255, 0.2), 0 -0.03em 0 0 rgba(0, 0, 0, 0.15), 0 0.03em 0 0 rgba(255, 255, 255, 0.2);
    height: 0.6em;
    left: 2.61em;
    top: 4.51em;
    width: 4.78em;
}
.grill__hole {
    background: #333;
    border-radius: 0.02em;
    box-shadow: 0.08em 0 0 0 #333, 0.16em 0 0 0 #333, 0.24em 0 0 0 #333, 0.32em 0 0 0 #333, 0.4em 0 0 0 #333, 0.48em 0 0 0 #333, 0.56em 0 0 0 #333, 0.64em 0 0 0 #333, 0.72em 0 0 0 #333, 0.8em 0 0 0 #333, 0.88em 0 0 0 #333, 0.96em 0 0 0 #333, 1.04em 0 0 0 #333, 1.12em 0 0 0 #333, 1.2em 0 0 0 #333, 1.28em 0 0 0 #333, 1.36em 0 0 0 #333, 1.44em 0 0 0 #333, 1.52em 0 0 0 #333, 1.6em 0 0 0 #333, 1.68em 0 0 0 #333, 1.76em 0 0 0 #333, 1.84em 0 0 0 #333, 1.92em 0 0 0 #333, 2em 0 0 0 #333;
    height: 0.42em;
    left: 0.13em;
    position: absolute;
    top: 0.09em;
    width: 0.04em;
}
.grill__hole--right {
    left: 2.59em;
}
/* ==========================================
   Windshield
   ========================================== */

.windshield {
    height: 100%;
    width: 100%;
    z-index: 30;
}
.windshield-rubber {
    background: #8a97a2;
    border-radius: 50% 50% 0 0 / 34% 34% 0 0;
    border: 0.14em solid #333;
    height: 1.4em;
    left: 1.9em;
    width: 6.2em;
    top: 1.32em;
}
.windshield-rubber--bottom {
    background: #8a97a2;
    border-radius: 0.16em;
    border: 0.08em solid #333;
    height: 0.32em;
    left: 1.28em;
    width: 7.44em;
    top: 3.51em;
}
.windshield-rubber--side {
    background: #8a97a2;
    border-radius: 50% 50% 60% 13% / 60% 60% 20% 5%;
    border: 0.12em solid #333;
    height: 2.18em;
    left: 1.46em;
    top: 1.65em;
    transform: rotate(11deg);
    width: 0.8em;
}
.windshield-rubber--side--right {
    border-radius: 50% 50% 13% 60% / 60% 60% 5% 20%;
    left: auto;
    right: 1.46em;
    transform: rotate(-11deg);
}
.windshield-top {
    background: #8a97a2;
    border-radius: 0.4em;
    height: 2em;
    left: 1.86em;
    width: 6.28em;
    top: 1.68em;
}
.windshield-bottom {
    background: #8a97a2;
    border-radius: 0.4em;
    height: 0.2em;
    left: 1.4em;
    width: 7.2em;
    top: 3.55em;
}
.windshield-bottom:after {
    background: #8a97a2;
    content: '';
    height: 0.3em;
    left: 0.2em;
    position: absolute;
    width: 6.8em;
    top: -0.2em;
}
/* ==========================================
   Front Parts
   ========================================== */

.front-parts {
    height: 100%;
    width: 100%;
    z-index: 40;
}
/* Wipers
   ========================================== */

.wiper {
    height: 0.78em;
    left: 4.86em;
    top: 3.24em;
    transform-origin: 97% 100%;
    transition: transform 1s ease-in-out;
    width: 2.4em;
}
.wiper-arm {
    background: #333;
    bottom: 0.42em;
    height: 0.05em;
    right: 0em;
    transform: rotate(26deg);
    width: 1.3em;
}
.wiper-arm:after {
    background: #333;
    border-radius: 0.03em;
    content: '';
    height: 0.05em;
    position: absolute;
    top: -0.02em;
    transform: rotate(-2deg);
    width: 1.3em;
}
.wiper-arm:before {
    background: #333;
    border-radius: 0.04em;
    content: '';
    height: 0.08em;
    position: absolute;
    right: 0em;
    top: 0em;
    transform: rotate(6deg);
    width: 0.6em;
}
.wiper-attachment {
    background: #333;
    border-radius: 0.06em;
    bottom: 0.06em;
    height: 0.12em;
    right: 0em;
    transform: rotate(20deg);
    width: 0.14em;
}
.wiper-attachment:after {
    background: #333;
    border-radius: 0.04em;
    content: '';
    height: 0.12em;
    left: 0.02em;
    position: absolute;
    top: 0.06em;
    width: 0.10em;
}
.wiper-blade {
    background: #333;
    height: 0.04em;
    left: 0em;
    top: 0.12em;
    transform: rotate(2deg);
    width: 2.04em;
}
.wiper-blade:after {
    background: transparent;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    box-shadow: inset 0 0.03em 0 0 #333;
    content: '';
    height: 0.14em;
    left: 0.26em;
    position: absolute;
    top: -0.1em;
    width: 1.5em;
}
.wiper-blade:before {
    background: #333;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    box-shadow: 0.8em -0.08em 0 0 #333;
    content: '';
    height: 0.06em;
    left: 0.16em;
    position: absolute;
    top: -0.04em;
    width: 0.4em;
}
.wiper-left {
    left: 1.92em;
    transform: rotate(-6deg);
}
.wiper-right--on {
    animation-name: wiper-wiping-right;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
@keyframes wiper-wiping-right {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(90deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
.wiper-left--on {
    animation-name: wiper-wiping-left;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    transform-origin: 98% 95%;
}
@keyframes wiper-wiping-left {
    0% {
        transform: rotate(-6deg);
    }
    50% {
        transform: rotate(84deg);
    }
    100% {
        transform: rotate(-6deg);
    }
}
/* Logo
   ========================================== */

.vw-logo {
    border: 0.08em solid #f3e5c0;
    border-radius: 50%;
    left: 4.52em;
    height: 0.96em;
    position: absolute;
    top: 5.68em;
    width: 0.96em;
}
.vw-logo__v {
    background: #f3e5c0;
    display: block;
    height: 0.10em;
    left: 0.35em;
    position: absolute;
    top: 0.29em;
    width: 0.10em;
}
.vw-logo__v:after,
.vw-logo__v:before {
    background: #f3e5c0;
    content: '';
    height: 0.4em;
    left: -0.08em;
    position: absolute;
    top: -0.3em;
    transform: rotate(-24deg);
    width: 0.08em;
}
.vw-logo__v:before {
    left: 0.1em;
    transform: rotate(24deg);
}
.vw-logo__w {
    background: #f3e5c0;
    display: block;
    height: 0.10em;
    left: 0.35em;
    position: absolute;
    top: 0.41em;
    width: 0.10em;
}
.vw-logo__w:after,
.vw-logo__w:before {
    background: #f3e5c0;
    content: '';
    height: 0.4em;
    left: -0.08em;
    position: absolute;
    top: 0;
    transform: rotate(24deg);
    width: 0.08em;
}
.vw-logo__w:before {
    left: 0.1em;
    transform: rotate(-24deg);
}
.vw-logo__w__leg-l,
.vw-logo__w__leg-r {
    background: #f3e5c0;
    display: block;
    height: 0.6em;
    left: -0.26em;
    position: absolute;
    top: -0.24em;
    transform: rotate(-24deg);
    width: 0.08em;
}
.vw-logo__w__leg-r {
    left: 0.29em;
    transform: rotate(24deg);
}
.vw-logo--shadow {
    border-color: rgba(0, 0, 0, 0.15);
    top: 5.72em;
}
.vw-logo--shadow .vw-logo__v {
    background: rgba(0, 0, 0, 0.15);
}
.vw-logo--shadow .vw-logo__v:after,
.vw-logo--shadow .vw-logo__v:before {
    background: rgba(0, 0, 0, 0.15);
}
.vw-logo--shadow .vw-logo__w {
    background: rgba(0, 0, 0, 0.15);
}
.vw-logo--shadow .vw-logo__w:after,
.vw-logo--shadow .vw-logo__w:before {
    background: rgba(0, 0, 0, 0.15);
}
.vw-logo--shadow .vw-logo__w__leg-l,
.vw-logo--shadow .vw-logo__w__leg-r {
    background: rgba(0, 0, 0, 0.15);
}
/* Lights
   ========================================== */

.directional {
    background: radial-gradient(at bottom right, #f46b0e 58%, #dd5900 59%);
    border: 0.06em solid #dd5900;
    border-top-color: #ec8c47;
    border-bottom-color: #bb4b00;
    border-radius: 0.06em;
    height: 0.56em;
    left: 1.89em;
    top: 4.55em;
    position: absolute;
    width: 0.68em;
}
.directional--right {
    left: auto;
    right: 1.89em;
}
.directional--on {
    animation-name: directional-blinking;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    background: #ffbc00;
    background: radial-gradient(#ffe7a5, #ffbc00 65%, #ff9c00);
    border-radius: 0.06em;
    box-shadow: 0 0 1em #ffbc00;
    height: 0.56em;
    left: -0.06em;
    position: relative;
    top: -0.06em;
    width: 0.68em;
}
@keyframes directional-blinking {
    0% {
        opacity: 1;
    }
    20% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    70% {
        opacity: 1;
    }
}
.headlight {
    background: #eee;
    background: linear-gradient(to bottom, #eee 50%, #555 50%);
    border-radius: 50%;
    box-shadow: 0 -0.12em 0 0 rgba(0, 0, 0, 0.15), 0 0.12em 0 0 rgba(255, 255, 255, 0.2);
    height: 1.14em;
    left: 1.64em;
    position: absolute;
    top: 5.66em;
    width: 1.14em;
}
.headlight:after {
    background: #eee;
    background: linear-gradient(to bottom, #aaa 50%, #eee 50%);
    border-radius: 50%;
    content: '';
    height: 0.94em;
    left: 0.12em;
    position: absolute;
    top: 0.1em;
    width: 0.94em;
    z-index: 2;
}
.headlight:before {
    border-radius: 50%;
    box-shadow: inset 0 0.08em 0 0 #ddd, 0 0.08em 0 0 #ccc;
    content: '';
    height: 0.7em;
    left: 0.24em;
    position: absolute;
    top: 0.18em;
    width: 0.7em;
    z-index: 3;
}
.headlight--right {
    left: auto;
    right: 1.64em;
}
.headlight--right:after {
    left: 0.08em;
}
.headlight--right:before {
    left: 0.2em;
}
.headlight--on {
    animation-name: headlight-blinking;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 1.5em 0.8em #fff;
    height: 0.94em;
    left: 0.12em;
    position: relative;
    top: 0.1em;
    width: 0.94em;
    z-index: 4;
}
.headlight--on:before {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    box-shadow: inset 0 0 0.1em 0.02em rgba(255, 255, 255, 0.3), 0 0 0.1em 0.02em rgba(255, 255, 255, 0.3);
    content: '';
    height: 0.5em;
    left: -0.3em;
    position: absolute;
    top: -0.2em;
    width: 0.5em;
    z-index: 5;
}
.headlight--on:after {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    box-shadow: inset 0 0 0.1em 0.02em rgba(255, 255, 255, 0.3), 0 0 0.1em 0.02em rgba(255, 255, 255, 0.3);
    content: '';
    height: 0.3em;
    left: 1em;
    position: absolute;
    top: 1em;
    width: 0.3em;
    z-index: 5;
}
.headlight--on--right {
    left: 0.08em;
}
.headlight--on__star {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 30%;
    height: 3em;
    left: 0.46em;
    position: absolute;
    top: -1.03em;
    width: 0.05em;
    z-index: 5;
}
.headlight--on__star:before {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 30%;
    content: '';
    height: 3em;
    position: absolute;
    transform: rotate(45deg);
    width: 0.05em;
    z-index: 5;
}
.headlight--on__star:after {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 30%;
    content: '';
    height: 3em;
    position: absolute;
    transform: rotate(-45deg);
    width: 0.05em;
    z-index: 5;
}
@keyframes headlight-blinking {
    0% {
        opacity: 1;
    }
    45% {
        opacity: 1;
    }
    55% {
        opacity: 0;
    }
    95% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
/* Bumper
   ========================================== */

.bumper {
    height: 0.8em;
    left: 0.98em;
    top: 7.73em;
    width: 8.04em;
}
.bumper-curve {
    background: #ded9d1;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    height: 0.16em;
    left: 0;
    width: 8.04em;
}
.bc-1 {
    border-bottom: 0.04em solid rgba(0, 0, 0, 0.3);
    top: 0.63em;
}
.bc-2 {
    box-shadow: inset 0 -0.04em 0 0 #fff;
    top: 0.47em;
}
.bc-3 {
    border-bottom: 0.04em solid rgba(0, 0, 0, 0.3);
    top: 0.19em;
}
.bc-4 {
    background: #fff;
    top: 0.03em;
}
.bumper-straight {
    background: #ded9d1;
    height: 0.16em;
    left: 0;
    width: 8.04em;
}
.bs-1 {
    top: 0.47em;
}
.bs-middle {
    height: 0.32em;
    left: 0.04em;
    top: 0.19em;
    width: 7.96em;
}
.bs-3 {
    top: 0.03em;
}
.bumper-top {
    background: #fff;
    border-radius: 0.06em;
    height: 0.06em;
    width: 8.04em;
}
.above-bumper {
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    height: 0.1em;
    left: 0.22em;
    top: -0.02em;
    width: 7.6em;
}
/* Spare Tire
   ========================================== */

.spare-tire {
    background: #ded9d1;
    background: linear-gradient(to bottom, #fff 50%, #cac4bb 50%);
    border-radius: 50%;
    box-shadow: 0 0.16em 0 0 rgba(0, 0, 0, 0.15);
    height: 3.6em;
    left: 3.2em;
    top: 4.1em;
    width: 3.6em;
}
.spare-tire:after {
    background: #ded9d1;
    border-radius: 50%;
    content: '';
    height: 2.86em;
    left: 0.37em;
    position: absolute;
    top: 0.37em;
    width: 2.86em;
}
/* ==========================================
   Mirrors
   ========================================== */

.mirrors {
    height: 100%;
    width: 100%;
    z-index: 10;
}
.mirror-glass {
    background: #666;
    height: 0.62em;
    border-radius: 50% 50% 50% 50% / 10% 10% 10% 10%;
    left: 0.44em;
    top: 3.26em;
    width: 0.56em;
}
.mirror-glass:after {
    background: radial-gradient(at left, #bbb 59%, #666 60%);
    box-shadow: inset 0.04em 0 0 0 #666;
    box-sizing: border-box;
    content: '';
    height: 0.5em;
    left: -0.05em;
    border-radius: 10% 10% 10% 10% / 50% 50% 50% 50%;
    position: absolute;
    top: 10%;
    width: 0.66em;
}
.mirror-arm {
    background: transparent;
    box-shadow: 0.04em -0.04em 0 0 #666, 0.08em -0.08em 0 0 #ddd;
    height: 0.2em;
    border-radius: 0 20% 0 0 / 0 50% 0 0;
    left: 0.52em;
    top: 3.7em;
    transform: rotate(35deg);
    width: 0.6em;
}
.mirror-arm:after,
.mirror-arm:before {
    background: linear-gradient(to bottom, #ddd 50%, #666 50%);
    border-radius: 50%;
    content: '';
    height: 0.14em;
    left: 0.02em;
    position: absolute;
    top: -0.1em;
    width: 0.14em;
}
.mirror-arm:before {
    background: #666;
    left: 0.58em;
    top: 0.03em;
}
.mirror-r {
    height: 100%;
    width: 100%;
    z-index: 10;
}
.mirror-r .mirror-glass {
    left: auto;
    right: 0.44em;
}
.mirror-r .mirror-glass:after {
    background: radial-gradient(at right, #bbb 59%, #666 60%);
    box-shadow: inset -0.04em 0 0 0 #666;
    left: -0.05em;
}
.mirror-arm-r {
    box-shadow: -0.04em -0.04em 0 0 #666, -0.08em -0.08em 0 0 #ddd;
    border-radius: 20% 0 0 0 / 50% 0 0 0;
    left: auto;
    right: 0.52em;
    transform: rotate(-35deg);
}
.mirror-arm-r:after,
.mirror-arm-r:before {
    background: linear-gradient(to bottom, #ddd 50%, #666 50%);
    border-radius: 50%;
    content: '';
    height: 0.14em;
    left: auto;
    right: 0.02em;
    position: absolute;
    top: -0.1em;
    width: 0.14em;
}
.mirror-arm-r:before {
    background: #666;
    left: auto;
    right: 0.58em;
    top: 0.03em;
}
/* ==========================================
   Camper Top
   ========================================== */

.campertop {
    height: 100%;
    width: 100%;
    z-index: 35;
}
.poptop-2 {
    background: transparent;
    border-radius: 50% 50% 0 0 / 50% 50% 0 0;
    box-shadow: 0 -0.36em 0 0 #ded9d1, 0 -0.38em 0 0 #fff;
    height: 0.7em;
    left: 2.05em;
    top: 0.84em;
    width: 5.9em;
}
.poptop-2:after,
.poptop-2:before {
    background: #ded9d1;
    border-radius: 0.06em;
    content: '';
    height: 0.46em;
    left: -0.04em;
    position: absolute;
    top: -0.06em;
    transform: rotate(14deg);
    width: 0.2em;
}
.poptop-2:before {
    left: auto;
    right: -0.04em;
    transform: rotate(-14deg);
}
.poptop-1 {
    background: transparent;
    border-radius: 50% 50% 0 0 / 50% 50% 0 0;
    box-shadow: 0 -0.36em 0 0 #ded9d1, 0 -0.4em 0 0 #fff;
    height: 0.7em;
    left: 1.95em;
    top: 1.1em;
    width: 6.1em;
}
.poptop-1:after,
.poptop-1:before {
    background: #ded9d1;
    border-radius: 0.06em;
    content: '';
    height: 0.46em;
    left: -0.02em;
    position: absolute;
    top: -0.08em;
    transform: rotate(10deg);
    width: 0.2em;
}
.poptop-1:before {
    left: auto;
    right: -0.02em;
    transform: rotate(-10deg);
}
.poptop-seal {
    background: transparent;
    border-radius: 50% 50% 0 0 / 68% 68% 0 0;
    box-shadow: 0 -0.1em 0 0 #333, 0 -0.18em 0 0 #fff;
    height: 0.7em;
    left: 1.85em;
    top: 1.22em;
    width: 6.3em;
}
/* ==========================================
   Underbody
   ========================================== */

.underbody {
    height: 100%;
    width: 100%;
    z-index: 10;
}
/* Tires
   ========================================== */

.tire {
    background: #333;
    border-radius: 0 0 30% 30% / 0 0 50% 50%;
    bottom: 0.1em;
    height: 2em;
    left: 1.43em;
    width: 1em;
}
.tire--right {
    left: auto;
    right: 1.43em;
}
/* Other Parts
   ========================================== */

.mid-parts {
    height: 100%;
    width: 100%;
}
.mid-parts--left {
    background: #333;
    border-radius: 0 0 40% 40% / 0 0 20% 20%;
    height: 0.6em;
    left: 3.76em;
    top: 8.16em;
    transform: rotate(6deg);
    width: 0.8em;
}
.mid-parts--right {
    left: auto;
    right: 3.76em;
    transform: rotate(-6deg);
}
.mid-parts--middle {
    background: transparent;
    border-radius: 40% 40% 0 0 / 30% 30% 0 0;
    box-shadow: 0 -0.2em 0 0 #333;
    height: 0.4em;
    left: 4.5em;
    top: 8.62em;
    width: 1em;
}
.under-part-1l {
    background: #333;
    border-radius: 0 0 0 40% / 0 0 0 20%;
    height: 0.7em;
    left: 3.06em;
    top: 7.94em;
    transform: rotate(-10deg);
    width: 0.8em;
}
.under-part-1r {
    border-radius: 0 0 40% 0 / 0 0 20% 0;
    left: auto;
    right: 3.06em;
    transform: rotate(10deg);
}
.under-part-2 {
    background: #333;
    height: 0.4em;
    left: 2em;
    top: 8.18em;
    width: 6em;
}
.shock-l {
    background: #333;
    border-radius: 0 0 40% 40% / 0 0 20% 20%;
    height: 0.7em;
    left: 2.6em;
    top: 8.06em;
    transform: rotate(-10deg);
    width: 0.36em;
}
.shock-r {
    left: auto;
    right: 2.6em;
    transform: rotate(10deg);
}
.bar-l {
    background: #333;
    border-radius: 0 0 100% 0 / 0 0 100% 0;
    height: 0.1em;
    left: 2.3em;
    top: 8.66em;
    transform: rotate(-15deg);
    width: 0.5em;
}
.bar-r {
    border-radius: 0 0 0 100% / 0 0 0 100%;
    left: auto;
    right: 2.3em;
    transform: rotate(15deg);
}
/* ==========================================
   Love Bus
   ========================================== */

.bus--top-love .bus__body--top,
.bus--bottom-love .bus__body--bottom {
    background: #008db0;
}
.bus-flower {
    background-color: #00394e;
    box-shadow: 0.32em -0.04em 0 0 #00394e, 0.06em 0.28em 0 0 #00394e, -0.32em 0.17em 0 0 #00394e, -0.32em -0.24em 0 0 #00394e, 0.06em -0.36em 0 0 #00394e;
    border-radius: 50%;
    height: 0.48em;
    width: 0.48em;
}
.bus-flower:before {
    background-color: #ff9d1e;
    box-shadow: 0.36em 0 0 0 #ffd322, 0.1em 0.32em 0 0 #ffd322, -0.28em 0.21em 0 0 #ffd322, -0.28em -0.2em 0 0 #ffd322, 0.10em -0.32em 0 0 #ffd322;
    box-sizing: border-box;
    border-radius: 50%;
    border: solid 0.04em #f74f31;
    content: '';
    height: 0.4em;
    width: 0.4em;
    position: absolute;
}
.bus-flower--1 {
    left: 1.38em;
    top: 6.55em;
}
.bus-flower--2 {
    left: 2.9em;
    top: 5.5em;
}
.bus-flower--3 {
    left: 3.1em;
    top: 6.45em;
}
.bus-flower--4 {
    left: 6.4em;
    top: 5.1em;
}
.bus-flower--5 {
    left: 6.7em;
    top: 6.2em;
}
.bus-flower--6 {
    left: 8.1em;
    top: 6.5em;
}
.bus-flower-big {
    background-color: #f74f31;
    border-radius: 10%;
    height: 1em;
    left: 4.5em;
    top: 5.67em;
    width: 1em;
}
.bus-flower-big:before,
.bus-flower-big:after {
    background-color: #f74f31;
    border-radius: 10%;
    content: '';
    height: 1em;
    position: absolute;
    transform: rotate(30deg);
    width: 1em;
}
.bus-flower-big:after {
    transform: rotate(60deg);
}
.bus-flower-big--2 {
    background-color: #00394e;
    height: 1.08em;
    left: 4.46em;
    top: 5.63em;
    width: 1.08em;
}
.bus-flower-big--2:before,
.bus-flower-big--2:after {
    background-color: #00394e;
    height: 1.08em;
    width: 1.08em;
}
.bus-flower-big--3 {
    background-color: #ff9d1e;
    height: 1.4em;
    left: 4.3em;
    top: 5.47em;
    width: 1.4em;
}
.bus-flower-big--3:before,
.bus-flower-big--3:after {
    background-color: #ff9d1e;
    height: 1.4em;
    width: 1.4em;
}
.bus-flower-big--4 {
    background-color: #00394e;
    height: 1.48em;
    left: 4.26em;
    top: 5.43em;
    width: 1.48em;
}
.bus-flower-big--4:before,
.bus-flower-big--4:after {
    background-color: #00394e;
    height: 1.48em;
    width: 1.48em;
}
.bus-flower-big--5 {
    background-color: #ffd322;
    height: 1.8em;
    left: 4.1em;
    top: 5.27em;
    width: 1.8em;
}
.bus-flower-big--5:before,
.bus-flower-big--5:after {
    background-color: #ffd322;
    height: 1.8em;
    width: 1.8em;
}
.bus-flower-big--6 {
    background-color: #00394e;
    height: 1.88em;
    left: 4.06em;
    top: 5.23em;
    width: 1.88em;
}
.bus-flower-big--6:before,
.bus-flower-big--6:after {
    background-color: #00394e;
    height: 1.88em;
    width: 1.88em;
}
.bus-flower-big--7 {
    background-color: #00c1d5;
    height: 2.2em;
    left: 3.9em;
    top: 5.07em;
    width: 2.2em;
}
.bus-flower-big--7:before,
.bus-flower-big--7:after {
    background-color: #00c1d5;
    height: 2.2em;
    width: 2.2em;
}
.bus-flower-big--8 {
    background-color: #00394e;
    height: 2.28em;
    left: 3.86em;
    top: 5.03em;
    width: 2.28em;
}
.bus-flower-big--8:before,
.bus-flower-big--8:after {
    background-color: #00394e;
    height: 2.28em;
    width: 2.28em;
}
.bus-shape-a {
    background-color: #00394e;
    border-radius: 50%;
    border: 0.05em solid #00c1d5;
    box-shadow: inset 0 0 0 0.16em #ffd322;
    height: 0.6em;
    left: 1.1em;
    overflow: hidden;
    top: 7.03em;
    width: 0.6em;
}
.bus-shape-a:before {
    background-color: #f74f31;
    border-radius: 50%;
    box-shadow: 0.28em -0.01em 0 0 #f74f31, 0.43em 0.22em 0 0 #f74f31, 0.30em 0.47em 0 0 #f74f31, 0.03em 0.49em 0 0 #f74f31, -0.12em 0.25em 0 0 #f74f31;
    content: '';
    height: 0.26em;
    left: -0.03em;
    position: absolute;
    top: -0.11em;
    width: 0.26em;
}
.bus-shape-a:after {
    background-color: #ff9d1e;
    border-radius: 50%;
    content: '';
    height: 0.13em;
    left: 0.185em;
    position: absolute;
    top: 0.185em;
    width: 0.13em;
}
.bus-shape-a--2 {
    left: 1.8em;
    top: 7.07em;
}
.bus-shape-a--3 {
    left: 2.5em;
    top: 7.09em;
}
.bus-shape-a--4 {
    left: 3.2em;
    top: 7.1em;
}
.bus-shape-a--5 {
    left: 3.9em;
    top: 7.1em;
}
.bus-shape-a--6 {
    left: 4.7em;
    top: 7.1em;
}
.bus-shape-a--7 {
    left: 5.5em;
    top: 7.1em;
}
.bus-shape-a--8 {
    left: 6.2em;
    top: 7.1em;
}
.bus-shape-a--9 {
    left: 6.9em;
    top: 7.09em;
}
.bus-shape-a--10 {
    left: 7.6em;
    top: 7.07em;
}
.bus-shape-a--11 {
    left: 8.3em;
    top: 7.03em;
}
.bus-headlight-circle {
    background-color: #00c1d5;
    border-radius: 50%;
    height: 1.6em;
    left: 1.55em;
    top: 5.5em;
    width: 1.6em;
}
.bus-headlight-circle--2 {
    left: 6.85em;
    top: 5.5em;
}
.bus-blinker-circle {
    background-color: #ffd322;
    border: 0.15em solid #00c1d5;
    border-bottom-width: 0.06em;
    border-top-width: 0.06em;
    border-radius: 40% 0;
    height: 1.14em;
    left: 1.42em;
    top: 4.26em;
    transform: rotate(8deg);
    width: 1.6em;
}
.bus-blinker-circle:before {
    background-color: #ff9d1e;
    border-radius: 40% 0;
    content: '';
    height: 0.9em;
    left: 0.1em;
    position: absolute;
    top: 0.06em;
    width: 1.1em;
}
.bus-blinker-circle:after {
    background-color: #f74f31;
    border-radius: 40% 0;
    content: '';
    height: 0.78em;
    left: 0.2em;
    position: absolute;
    top: 0.12em;
    width: 0.9em;
}
.bus-blinker-circle--2 {
    border-radius: 0 40%;
    left: 6.98em;
    transform: rotate(-8deg);
}
.bus-blinker-circle--2:before {
    border-radius: 0 40%;
}
.bus-blinker-circle--2:after {
    border-radius: 0 40%;
}

HTML

</div>

Responsive Buses with CSS VW unit。公交车，小汽车，班车。

html5, car, bus

编辑器支持Emmet

快捷键

Responsive Buses with CSS VW unit。公交车，小汽车，班车。

html5, car, bus

使用CSS3给Owl Carousel插件实现的幻灯片添加镜头拉近特效

HTML5 Canvas使用单纯形噪音算法实现的抽象粒子动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：