css实现冰淇淋汽车行驶动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css实现冰淇淋汽车行驶动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        html,body {
        padding:0;
        margin:0;
        width:100%;
        height:100%
}
.background-stuff {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        overflow:hidden;
        background:#98c5e8;
        animation:wrapperIn 2s
}
.background-stuff .bg {
        position:absolute;
        top:0;
        left:-100%;
        width:50%;
        height:100%;
        background:#636ed1;
        -webkit-animation:bgIn 4s 0s linear infinite;
        -moz-animation:bgIn 4s 0s linear infinite;
        -ms-animation:bgIn 4s 0s linear infinite;
        -o-animation:bgIn 4s 0s linear infinite;
        animation:bgIn 4s 0s linear infinite;
        -webkit-transform:skewX(10deg);
        -moz-transform:skewX(10deg);
        -ms-transform:skewX(10deg);
        -o-transform:skewX(10deg);
        transform:skewX(10deg);
        z-index:1
}
.background-stuff .bg-2 {
        background:#8faaff;
        -webkit-animation:bgIn 4s 1s linear infinite;
        -moz-animation:bgIn 4s 1s linear infinite;
        -ms-animation:bgIn 4s 1s linear infinite;
        -o-animation:bgIn 4s 1s linear infinite;
        animation:bgIn 4s 1s linear infinite
}
.background-stuff .bg-3 {
        background:#5a73da;
        -webkit-animation:bgIn 4s 2s linear infinite;
        -moz-animation:bgIn 4s 2s linear infinite;
        -ms-animation:bgIn 4s 2s linear infinite;
        -o-animation:bgIn 4s 2s linear infinite;
        animation:bgIn 4s 2s linear infinite
}
.background-stuff .ground {
        position:absolute;
        bottom:0;
        margin-bottom:-1.875em;
        height:50%;
        width:100%;
        background:#ffc253;
        z-index:2
}
.container {
        height:100%;
        width:100%;
        display:table;
        overflow:hidden
}
.container .car-wrapper {
        display:table-cell;
        vertical-align:middle;
        width:100%
}
.car {
        width:20em;
        height:12.5em;
        position:relative;
        opacity:1;
        margin-left:auto;
        margin-right:auto;
        z-index:4;
        -webkit-animation:carMove .3s infinite;
        -moz-animation:carMove .3s infinite;
        -ms-animation:carMove .3s infinite;
        -o-animation:carMove .3s infinite;
        animation:carMove .3s infinite
}
.car .body {
        position:absolute;
        top:0;
        left:.875em;
        width:14.375em;
        height:10em;
        background:#fff
}
.car .body:before {
        content:"";
        position:absolute;
        left:-0.875em;
        border-radius:10px 10px 0 0;
        width:15.875em;
        z-index:2;
        height:.75em;
        background:#3190dd
}
.car .body div {
        position:absolute;
        background:#fff;
        width:18.125em;
        height:3.75em;
        bottom:-0.625em;
        border-radius:0 0 10px 10px
}
.car .body div:before {
        content:"";
        background:#fff;
        position:absolute;
        top:-1.8125em;
        right:0;
        width:5em;
        height:2.5em;
        z-index:1;
        border-radius:0 14px 0 0;
        -webkit-transform:rotate(17deg);
        -moz-transform:rotate(17deg);
        -ms-transform:rotate(17deg);
        -o-transform:rotate(17deg);
        transform:rotate(17deg)
}
.car .body div:after {
        content:"";
        background:#fff;
        position:absolute;
        top:-5.125em;
        right:1.0625em;
        width:5.625em;
        height:2.5em;
        z-index:1;
        border-radius:10px 0 0 0;
        -webkit-transform:rotate(75deg);
        -moz-transform:rotate(75deg);
        -ms-transform:rotate(75deg);
        -o-transform:rotate(75deg);
        transform:rotate(75deg)
}
.car .wheel {
        position:absolute;
        width:3.75em;
        height:3.75em;
        background:#3c464c;
        border-radius:50%;
        bottom:0;
        left:3em;
        z-index:14;
        -webkit-animation:carMove .3s .2s;
        -moz-animation:carMove .3s .2s;
        -ms-animation:carMove .3s .2s;
        -o-animation:carMove .3s .2s;
        animation:carMove .3s .2s
}
.car .wheel:before {
        content:"";
        position:absolute;
        left:50%;
        top:50%;
        background:#fff;
        width:1.5em;
        height:1.5em;
        border-radius:50%;
        -webkit-transform:translate(-50%,-50%);
        -moz-transform:translate(-50%,-50%);
        -ms-transform:translate(-50%,-50%);
        -o-transform:translate(-50%,-50%);
        transform:translate(-50%,-50%)
}
.car .wheel:nth-of-type(2) {
        left:13.125em
}
.car .decos {
        width:18.125em;
        height:10.5em;
        position:absolute;
        z-index:12;
        top:0;
        left:.875em
}
.car .line-bot {
        position:absolute;
        bottom:.5625em;
        height:3px;
        width:100%;
        background:#e1e8ef
}
.car .door {
        position:absolute;
        left:7.........完整代码请登录后点击上方下载按钮下载查看