來(lái)不及解釋了朵锣、快上車(chē)

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滴滴</title>
<style>
body{
    margin:0;
    color:#444;
    background:#00c380;
    font:300 18px/18px Roboto, sans-serif;
}
*,:after,:before{box-sizing:border-box}
.pull-left{float:left}
.pull-right{float:right}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}

body{text-align:center;padding:80px;padding-top: 0;overflow:hidden}

.car .mirror-wrap:before,
.car .mirror-wrap:after,
.car .mirror-inner:before,
.car .mirror-inner:after,
.car .middle .top:before,
.car .middle .top:after,
.car .lights:before,
.car .lights:after,
.car .bumper .top:before,
.car .bumper .top:after,
.car .bumper .middle:before,
.car .tyres .tyre:before,
.car .tyres .tyre:after
{
    content:'';
    position:absolute;
}
.car{
    z-index:1;
    margin:0 auto;
    position:relative;
    display:inline-block;
}
.car .body{
    z-index:1;
    position:relative;
    -webkit-animation:suspension 4s linear infinite;
            animation:suspension 4s linear infinite;
}
.car .mirror-wrap{
    width:88px;
    height:30px;
    margin:auto;
    position:relative;
    background-color:#fff;
    border-top-left-radius:45px 10px;
    border-top-right-radius:45px 10px;
}
.car .mirror-wrap:before,
.car .mirror-wrap:after{
    top:8px;
    border:5px solid #1a1c20;
    border-top:15px solid transparent;
}
.car .mirror-wrap:before{
    left:-5px;
    border-left:0 solid transparent;
}
.car .mirror-wrap:after{
    right:-5px;
    border-right:0 solid transparent;
}
.car .mirror-inner{
    top:2px;
    width:inherit;
    height:inherit;
    margin:inherit;
    position:inherit;
    background-color:#1a1c20;
    border-top-left-radius:50px 8px;
    border-top-right-radius:50px 8px;
}
.car .mirror-inner:before,
.car .mirror-inner:after{
    bottom:0;
    width:10px;
    height:8px;
    background-color:#252525;
}
.car .mirror-inner:before{
    left:-12px;
    border-radius:2px 0 0 5px;
}
.car .mirror-inner:after{
    right:-12px;
    border-radius:0 2px 5px 0;
}
.car .mirror{
    width:100%;
    z-index:10;
    height:25px;;
    overflow:hidden;
    position:relative;
    border-top-left-radius:45px 10px;
    border-top-right-radius:45px 10px;
}
.car .mirror .shine{
    left:50%;
    width:5px;
    z-index:-1;
    height:40px;
    position:absolute;
    margin-left:-2.5px;
    background-color:#3d3e3e;
    -webkit-animation:shine 4s linear infinite;
            animation:shine 4s linear infinite;
}
.car .middle{
    z-index:1;
    margin-top:-2px;
}
.car .middle .top{
    width:98px;
    height:14px;
    margin:auto;
    position:relative;
    background-color:#f7f7f7;
}
.car .middle .top:before,
.car .middle .top:after{
    top:0;
    border:5px solid #f7f7f7;
    border-top:9px solid transparent;
}
.car .middle .top:before{
    left:-7px;
    border-left:2px solid transparent;
}
.car .middle .top:after{
    right:-7px;
    border-right:2px solid transparent;
}
.car .middle .top .line{
    top:2px;
    height:1px;
    width:44px;
    margin:auto;
    position:relative;
    background-color:#bebebe;
}
.car .middle .bottom{
    margin:auto;
    width:115px;
    height:20px;
    margin-top:-2px;
    background-color:#dfdfdf;
    border-top-left-radius:4px 5px;
    border-top-right-radius:4px 5px;
}
.car .lights{
    top:5px;
    width:111px;
    height:12px;
    margin:auto;
    position:relative;
    border-radius:2px;
    background-color:#6a6a6a;
}
.car .lights:before,
.car .lights:after{
    top:50%;
    width:16px;
    height:16px;
    margin-top:-8px;
    border-radius:50%;
    background-color:#fff;
    border:1px solid #777;
}
.car .lights:before{left:3px}
.car .lights:after{right:3px}
.car .lights .line{
    top:50%;
    left:50%;
    width:50%;
    height:1px;
    background:#fff;
    position:absolute;
    -webkit-transform:translateX(-50%);
            transform:translateX(-50%);
}
.car .bumper .top{
    width:110px;
    height:10px;
    margin:auto;
    position:relative;
    background-color:#202428;
    border-radius:0 0 6px 6px;
    border-top:1px solid #474949;
    border-bottom:1px solid #474949;
}
.car .bumper .top:before,
.car .bumper .top:after{
    top:50%;
    width:10px;
    height:4px;
    margin-top:-2px;
    border-radius:1px;
    background-color:#FB8C00;
}
.car .bumper .top:before{left:5px}
.car .bumper .top:after{right:5px}
.car .bumper .middle{
    height:8px;
    width:102px;
    margin:auto;
    position:relative;
    background-color:#cfcfcf;
    border-radius:0 0 6px 6px;
}
.car .bumper .middle:before{
    top:50%;
    left:50%;
    color:#fff;
    height:12px;
    font-size:8px;
    padding:1px 4px;
    font-weight:500;
    margin-top:-6px;
    line-height:10px;
    text-align:center;
    white-space:nowrap;
    content:attr(data-numb);
    background-color:#E9573F;
    -webkit-transform:translateX(-50%);
            transform:translateX(-50%);
}
.car .bumper .bottom{
    height:6px;
    width:85px;
    margin:auto;
    position:relative;
    background-color:#202428;
    border-radius:0 0 6px 6px;
    box-shadow:0 1px 11px rgba(0,0,0,.75);
}
.car .tyres{
    margin:auto;
    width:110px;
    position:relative;
}
.car .tyres .tyre{
    width:100%;
    height:40px;
    bottom:-6.5px;
    position:absolute;
}
.car .tyres .tyre:before{
    left:-5px;
    box-shadow:-2px 2px 0 #b7b7b8 inset;
}
.car .tyres .tyre:after{
    right:-5px;
    box-shadow:2px 2px 0 #b7b7b8 inset;
}
.car .tyres .tyre:before,
.car .tyres .tyre:after{
    width:18px;
    height:40px;
    border-radius:6px;
    background-color:#1a1c20;
    background:-webkit-linear-gradient(left,#333 50%,#555 50%);
    background:linear-gradient(to right,#333 50%,#555 50%);
    background-size:2px;
}
.car .tyres .tyre.back:before,
.car .tyres .tyre.back:after{bottom:3px}
.car .tyres .tyre.back:before{left:12px}
.car .tyres .tyre.back:after{right:12px}

.road-wrap{
    -webkit-perspective:160px;
            perspective:160px;
}
.road-wrap .road{
    margin-top:-360px;
    -webkit-transform:rotateX(80deg);
            transform:rotateX(80deg);
}
.road-wrap .lane-wrap{
    -webkit-animation:steer 4s linear infinite;
            animation:steer 4s linear infinite;
}
.road-wrap .lane{
    width:20px;
    margin:auto;
}
.road-wrap .lane>div{
    width:100%;
    margin:auto;
    margin-top:30px;
    margin-bottom:30px;
    background-color:#fff;
    -webkit-animation:lane 4s linear infinite;
            animation:lane 4s linear infinite;
}
.road-wrap .lane>div:nth-child(1){height:15px}
.road-wrap .lane>div:nth-child(2){height:20px}
.road-wrap .lane>div:nth-child(3){height:30px}
.road-wrap .lane>div:nth-child(4){height:50px}
.road-wrap .lane>div:nth-child(5){height:40px}
.road-wrap .lane>div:nth-child(6){height:50px}
.road-wrap .lane>div:nth-child(7){height:40px}
.road-wrap .lane>div:nth-child(8){height:50px}
.road-wrap .lane>div:nth-child(9){height:30px}
.road-wrap .lane>div:nth-child(10){height:20px}
.road-wrap .lane>div:nth-child(11){height:15px}

@-webkit-keyframes shine{
    0%,80%,100%{
        -webkit-transform:translateX(-55px) rotate(24deg);
                transform:translateX(-55px) rotate(24deg);
    }
    5%,15%,25%,35%,45%,55%,65%,75%,85%,95%{background-color:#2d2d2d}
    0%,10%,20%,30%,40%,50%,60%,70%,80%,90%,100%{background-color:#4d4d4d}
    33%,44%{
        -webkit-transform:translateX(30px) rotate(-14deg);
                transform:translateX(30px) rotate(-14deg);
    }
    66%{
        -webkit-transform:translateX(0px) rotate(-10deg);
                transform:translateX(0px) rotate(-10deg);
    }
}

@keyframes shine{
    0%,80%,100%{
        -webkit-transform:translateX(-55px) rotate(24deg);
                transform:translateX(-55px) rotate(24deg);
    }
    5%,15%,25%,35%,45%,55%,65%,75%,85%,95%{background-color:#2d2d2d}
    0%,10%,20%,30%,40%,50%,60%,70%,80%,90%,100%{background-color:#4d4d4d}
    33%,44%{
        -webkit-transform:translateX(30px) rotate(-14deg);
                transform:translateX(30px) rotate(-14deg);
    }
    66%{
        -webkit-transform:translateX(0px) rotate(-10deg);
                transform:translateX(0px) rotate(-10deg);
    }
}
@-webkit-keyframes lane{
    0%{
        -webkit-transform:translateY(320px);
                transform:translateY(320px);
    }
    100%{
        -webkit-transform:translateY(-160px);
                transform:translateY(-160px);
    }
}
@keyframes lane{
    0%{
        -webkit-transform:translateY(320px);
                transform:translateY(320px);
    }
    100%{
        -webkit-transform:translateY(-160px);
                transform:translateY(-160px);
    }
}
@-webkit-keyframes steer{
    0%,100%{
        -webkit-transform:translateX(-15px) rotate(5deg);
                transform:translateX(-15px) rotate(5deg);
    }
    50%{
        -webkit-transform:translateX(15px) rotate(-5deg);
                transform:translateX(15px) rotate(-5deg)
    }
}
@keyframes steer{
    0%,100%{
        -webkit-transform:translateX(-15px) rotate(5deg);
                transform:translateX(-15px) rotate(5deg);
    }
    50%{
        -webkit-transform:translateX(15px) rotate(-5deg);
                transform:translateX(15px) rotate(-5deg)
    }
}
@-webkit-keyframes suspension{
    0%,75%,100%{
        -webkit-transform:rotate(3deg);
                transform:rotate(3deg)
    }
    10%,30%,50%,70%,90%{top:0}
    20%,40%,60%,80%,100%{top:-1px}
    25%,50%{
        -webkit-transform:rotate(-3deg);
                transform:rotate(-3deg)
    }
    20%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
    90%{-webkit-transform:rotate(-1deg);transform:rotate(-1deg)}
}
@keyframes suspension{
    0%,75%,100%{
        -webkit-transform:rotate(3deg);
                transform:rotate(3deg)
    }
    10%,30%,50%,70%,90%{top:0}
    20%,40%,60%,80%,100%{top:-1px}
    25%,50%{
        -webkit-transform:rotate(-3deg);
                transform:rotate(-3deg)
    }
    20%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
    90%{-webkit-transform:rotate(-1deg);transform:rotate(-1deg)}
}
</style>
</head>
<body>

<br /><br /><br /><br /><br /><br />

<div class="car">
    <div class="body">
        <div class="mirror-wrap">
            <div class="mirror-inner">
                <div class="mirror">
                    <div class="shine"></div>
                </div>
            </div>
        </div>
        <div class="middle">
            <div class="top">
                <div class="line"></div>
            </div>
            <div class="bottom">
                <div class="lights">
                    <div class="line"></div>
                </div>
            </div>
        </div>
        <div class="bumper">
            <div class="top"></div>
            <div class="middle" data-numb="sonkwo"></div>
            <div class="bottom"></div>
        </div>
    </div>
    <div class="tyres">
        <div class="tyre back"></div>
        <div class="tyre front"></div>
    </div>
</div>
<div class="road-wrap">
    <div class="road">
        <div class="lane-wrap">
            <div class="lane">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市宝恶，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖叶撒，帶你破解...
沈念sama閱讀 211,290評(píng)論 6贊 491
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異耐版，居然都是意外死亡祠够，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 90,107評(píng)論 2贊 385
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門(mén)粪牲，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)古瓤，“玉大人，你說(shuō)我怎么就攤上這事腺阳÷渚” “怎么了？”我有些...
開(kāi)封第一講書(shū)人閱讀 156,872評(píng)論 0贊 347
道士緝兇錄：失蹤的賣(mài)姜人
文/不壞的土叔我叫張陵亭引，是天一觀的道長(zhǎng)绎速。經(jīng)常有香客問(wèn)我，道長(zhǎng)焙蚓，這世上最難降的妖魔是什么纹冤？我笑而不...
開(kāi)封第一講書(shū)人閱讀 56,415評(píng)論 1贊 283
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮购公，結(jié)果婚禮上萌京，老公的妹妹穿的比我還像新娘。我一直安慰自己宏浩，他們只是感情好知残，可當(dāng)我...
茶點(diǎn)故事閱讀 65,453評(píng)論 6贊 385
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布。她就那樣靜靜地躺著绘闷，像睡著了一般橡庞。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上印蔗，一...
開(kāi)封第一講書(shū)人閱讀 49,784評(píng)論 1贊 290
城市分裂傳說(shuō)
那天扒最，我揣著相機(jī)與錄音，去河邊找鬼华嘹。笑死吧趣，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播强挫，決...
沈念sama閱讀 38,927評(píng)論 3贊 406
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼岔霸，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了俯渤？” 一聲冷哼從身側(cè)響起呆细，我...
開(kāi)封第一講書(shū)人閱讀 37,691評(píng)論 0贊 266
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎八匠，沒(méi)想到半個(gè)月后絮爷，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 44,137評(píng)論 1贊 303
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡梨树，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 36,472評(píng)論 2贊 326
?白月光啟示錄
正文我和宋清朗相戀三年坑夯，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片抡四。...
茶點(diǎn)故事閱讀 38,622評(píng)論 1贊 340
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡柜蜈，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出指巡，到底是詐尸還是另有隱情淑履，我是刑警寧澤，帶...
沈念sama閱讀 34,289評(píng)論 4贊 329
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布厌处，位于F島的核電站鳖谈，受9級(jí)特大地震影響岁疼，放射性物質(zhì)發(fā)生泄漏阔涉。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,887評(píng)論 3贊 312
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一捷绒、第九天我趴在偏房一處隱蔽的房頂上張望瑰排。院中可真熱鬧，春花似錦暖侨、人聲如沸椭住。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 30,741評(píng)論 0贊 21
一樁弒父案字逗，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)京郑。三九已至，卻和暖如春葫掉，著一層夾襖步出監(jiān)牢的瞬間些举，已是汗流浹背。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 31,977評(píng)論 1贊 265
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工俭厚，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留户魏，地道東北人。一個(gè)月前我還...
沈念sama閱讀 46,316評(píng)論 2贊 360
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像叼丑，于是被迫代替她去往敵國(guó)和親关翎。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 43,490評(píng)論 2贊 348

來(lái)不及解釋了蟀给、快上車(chē)

來(lái)不及解釋了朵锣、快上車(chē)

推薦閱讀更多精彩內(nèi)容