css布局实现一个压路机压土机道路施工动画效果代码-html代码-BFW代码库

css布局实现一个压路机压土机道路施工动画效果代码

代码语言：html

所属分类：动画

代码描述：css布局实现一个压路机压土机道路施工动画效果代码

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

<html>
<head>
    <style>
        body {
            margin: 0;
            color: #444;
            background: #ffc600;
            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
        }

        .machine-wrap {
            top: 50%;
            left: 50%;
            width: 475px;
            height: 145px;
            position: absolute;
            margin-top: -72.5px;
            margin-left: -237.5px;
            border-bottom: 5px solid #271e01;
        }
        .machine {
            width: 475px;
            height: 145px;
            padding-bottom: 20px;
        }
        .machine .machine-roof,
        .machine .machine-main {
            margin: auto;
        }
        .machine-wrap .road .mud:before,
        .machine-wrap .road .mud:after,
        .machine .machine-roof .machine-silencer:before,
        .machine .machine-roof .machine-silencer:after,
        .machine .machine-body:before,
        .machine .machine-body:after,
        .machine .machine-main .machine-back:before,
    .........完整代码请登录后点击上方下载按钮下载查看