【滴滴滴】通往幼儿园的校车要发车啦！

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第8天，点击查看活动详情

前言

本文是真的通往幼儿园发车，不是各位老司机开的车哦！

幼儿园的小车就应该可可爱爱，可以带着小盆友春游、秋游、上学、放学。

正式发车

先画个地平线

💪 地平线不应该很平整，应该来点坑坑洼洼的样子，也方便做成动画之后，看出车在地上跑的效果

<div class='ground-line'>
    <div>
        <span class='line1'></span>
        <span class='line2'></span>
        <span class='line3'></span>
        <span class='line1'></span>
        <span class='line2'></span>
        <span class='line3'></span>
    </div>
</div>

💪 所以这里用不同的线条样式来表示地平线的线段地势

.ground-line {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    overflow: hidden;
    height: 6px;
}
.ground-line span {
    height: 6px;
    display: inline-block;
    background-color: #4B1A61;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    vertical-align: bottom;
    margin-right: 20px;
}
.ground-line .line1 {
    width: 80px;
}
.ground-line .line2 {
    width: 580px;
}
.ground-line .line3 {
    width: 80px;
}

💪 线条画完之后，就需要让它动起来了

.ground-line div {
    width: 1600px;
    font-size: 0;
    -moz-animation: roadLine 3s infinite linear;
    -webkit-animation: roadLine 3s infinite linear;
    animation: roadLine 3s infinite linear;
}
@-moz-keyframes roadLine {
    from {
        -moz-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    to {
        -moz-transform: translate(-800px, 0);
        transform: translate(-800px, 0);
    }
}
@-webkit-keyframes roadLine {
    from {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    to {
        -webkit-transform: translate(-800px, 0);
        transform: translate(-800px, 0);
    }
}
@keyframes roadLine {
    from {
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    to {
        -moz-transform: translate(-800px, 0);
        -ms-transform: translate(-800px, 0);
        -webkit-transform: translate(-800px, 0);
        transform: translate(-800px, 0);
    }
}

✔️ 动画效果就直接从左到右去运动了

车轮滚滚

💪 车轮只需要画一个就可以了，然后把代码复制一份出来，就有两个车轮的样式了

💪 车轮主要是通过两个圆形来展示的，中间的车轮钉子的地方就用span标签来写样式

<div class='wheel-wrap'>
    <div class='wheel'>
        <div class='wheel-outer'>
            <div class='wheel-cup'>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>
</div>

💪 车轮的样式主要是大小圆和四个span标签上的小圆，动画效果就是通过span标签的父级元素 wheel-cup 的样式来写的，中间的四个小圆转动起来就可以了，视觉效果会认为车轮在转动

.wheel-wrap {
    width: 80px;
    height: 80px;
    position: absolute;
    z-index: 9;
    bottom: -40px;
}
.wheel-wrap .wheel {
    width: 76%;
    height: 76%;
    left: 12%;
    top: 12%;
    position: absolute;
    text-align: center;
    font-size: 0;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.wheel-wrap .wheel::after {
    content: '';
    top: 1px;
    left: 2px;
    height: 100%;
    position: absolute;
    width: calc(100% - 4px);
    -moz-box-shadow: inset 0 7px 0 #747474;
    -webkit-box-shadow: inset 0 7px 0 #747474;
    box-shadow: inset 0 7px 0 #747474;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    z-index: 9;
}
.wheel-wrap .wheel .wheel-outer {
    position: absolute;
    width: 100%;
    background-color: #a6a6a6;
    border: solid 3px #4B1A61;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    top: 0;
    left: 0;
    height: 100%;
    -moz-animation: wheel 0.4s infinite linear;
    -webkit-animation: wheel 0.4s infinite linear;
    animation: wheel 0.4s infinite linear;
}
.wheel-wrap .wheel .wheel-outer::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 5px;
    background-color: #b8b8b8;
    top: 5px;
    left: 16px;
    z-index: 8;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.wheel-wrap .wheel .wheel-cup {
    width: 60%;
    height: 60%;
    margin-top: 20%;
    display: inline-block;
    position: relative;
    background-color: #60cdff;
    border: solid 3px #3b154d;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    padding: 5px 4px;
}
.wheel-wrap .wheel .wheel-cup::after {
    content: '';
    width: 8px;
    position: absolute;
    left: 41%;
    top: 40%;
    height: 3px;
    background-color: #00aaf9;
    display: inline-block;
}
.wheel-wrap .wheel .wheel-cup span {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 1px;
    background-color: #a6a6a6;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: solid 1px #3b154d;
}

另外一个车轮直接复制 html 代码就可以了。

底盘

💪 底盘就比较简单了，底下就一个长方形，也可以增加几个小方形当做车灯之类的点缀

<div class='side-guard'>
    <div class='shade'></div>
    <div class='bumper back'></div>
    <div class='bumper front'></div>
    <div class='front-indicator'></div>
</div>

💪 底盘是没有动画效果的，所以非常简单的

.side-guard {
    background-color: #FA7775;
    border-top: solid 4px #4B1A61;
    bottom: 4px;
    position: absolute;
    left: 4px;
    width: calc(100% - 8px);
    height: 50px;
    -moz-border-radius: 0 0 0 10px;
    -webkit-border-radius: 0;
    border-radius: 0 0 0 10px;
}
.side-guard .shade {
    position: absolute;
    left: 0px;
    -moz-border-radius: 0 0 0 15px;
    -webkit-border-radius: 0;
    border-radius: 0 0 0 15px;
    bottom: 0px;
    width: 100%;
    background-color: #f96461;
    height: 40%;
}
.side-guard .bumper {
    position: absolute;
    border: solid 4px #4B1A61;
    height: 18px;
    position: absolute;
    background-color: #a6a6a6;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
.side-guard .bumper.front {
    right: -12px;
    width: 22px;
    height: 22px;
    bottom: -10px;
}
.side-guard .bumper.back {
    width: 29px;
    top: 11px;
    -moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
    left: -15px;
}
.side-guard .front-indicator {
    width: 26px;
    height: 11px;
    -moz-box-shadow: 0 3px 0 #f96461;
    -webkit-box-shadow: 0 3px 0 #f96461;
    box-shadow: 0 3px 0 #f96461;
    position: absolute;
    border: solid 3px #4B1A61;
    right: 10px;
    background-color: #ffe400;
    top: 5px;
}

车门

💪 车门也只需要画一个长方形的框框就可以了，

<div class='main-door'>
</div>

💪 为了契合车轮，使用了after伪元素

.main-door {
    position: absolute;
    right: 120px;
    bottom: 0;
    border: solid 4px #4B1A61;
    -moz-border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px;
    border-radius: 10px 10px 0 0;
    width: 80px;
    height: 80%;
    z-index: 9;
    background-color: #f5f4f1;
}
.main-door::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 11%;
    background-color: #eae8e2;
}

车门上的窗户（顺便加一个门把手）

<div class='glass'>
</div>

📣 车窗的样式中增加了一个透明的阴影，为了增加光效的

.main-door .glass {
    background-color: #60cdff;
    border: solid 3px #4B1A61;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    width: 85%;
    height: 60px;
    margin-top: 5px;
    display: inline-block;
    overflow: hidden;
    position: relative;
    z-index: 0;
}
.main-door .glass::after {
    content: "";
    position: absolute;
    background-color: rgba(255, 255, 255, 0.3);
    width: 100%;
    -moz-border-radius: 12px 12px 10px 10px;
    -webkit-border-radius: 12px;
    border-radius: 12px 12px 10px 10px;
    height: 60%;
    bottom: 0;
    left: 0;
}

💪 把手的样式也就是一个方框而已

<div class='door-handle'></div>

.main-door .door-handle {
    background-color: #FA7775;
    border: solid 0.2em #4B1A61;
    width: 10px;
    margin-left: 4.5%;
    height: 22px;
    position: absolute;
    z-index: 0;
    right: 5px;
    bottom: 40%;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}
.main-door .door-handle::before {
    content: '';
    position: absolute;
    width: 50%;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.3);
    height: 100%;
    display: block;
}

车身

💪 按照上面的画法来看，车身上也就是窗户和一些小方块组成的，所以就画一个简单的外边框就好了，具体效果可以在文章最后码上掘金中查看

<div class='body-cover'>
    <div class='top-roof'></div>
    <div class='indi back-top-indicator'></div>
    <div class='indi back-bottom-indicator'></div>
</div>

.vehicle-body {
    width: 500px;
    height: 220px;
    position: absolute;
    right: 20%;
    bottom: 33px;
    z-index: 9;
    -moz-border-radius: 15px 60px 0 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px 60px 0 15px;
}
.vehicle-body .wrap-body {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -moz-animation: body 3s infinite ease;
    -webkit-animation: body 3s infinite ease;
    animation: body 3s infinite ease;
}
.vehicle-body .body-cover {
    position: absolute;
    border: solid 5px #4B1A61;
    width: 100%;
    background-color: #C6EDFF;
    height: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    -moz-border-radius: 15px 60px 0 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px 60px 0 15px;
}
.top-roof {
    position: absolute;
    left: 0;
    top: 0;
    background-color: #ffe400;
    border-bottom: solid 4px #4B1A61;
    width: 100%;
    height: 14px;
}
.indi {
    width: 24px;
    height: 10px;
    -moz-box-shadow: 0 3px 0 #a7e3ff;
    -webkit-box-shadow: 0 3px 0 #a7e3ff;
    box-shadow: 0 3px 0 #a7e3ff;
    position: absolute;
    border: solid 3px #4B1A61;
    left: 10px;
    background-color: #ffa700;
}
.indi.back-top-indicator {
    top: 24px;
}
.indi.back-bottom-indicator {
    bottom: 60px;
}

📣 样式可以简单，但是动画效果不能省，该动的地方就得动起来

@-moz-keyframes body {
    0%, 20%, 40%, 45%, 60%, 80%, 100% {
        top: 0;
    }
    70% {
        top: 3px;
    }
    30%,
    90% {
        top: 6px;
    }
}
@-webkit-keyframes body {
    0%, 20%, 40%, 45%, 60%, 80%, 100% {
        top: 0;
    }
    70% {
        top: 3px;
    }
    30%,
    90% {
        top: 6px;
    }
}
@keyframes body {
    0%, 20%, 40%, 45%, 60%, 80%, 100% {
        top: 0;
    }
    70% {
        top: 3px;
    }
    30%,
    90% {
        top: 6px;
    }
}

📢 通往幼儿园的校车正式发车，还有没上车的，抓紧啦。

完整代码（码上掘金）