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,
        .machine .machine-main .machine-back:after,
        .machine .machine-main .machine-front:after {
            content: '';
            position: absolute;
        }
        .machine .machine-roof {
            width: 80px;
            height: 60px;
            bottom: -1px;
            position: relative;
            background: #ffc600;
            border: 15px solid #271e01;
            border-bottom: none;
        }
        .machine .machine-roof .machine-silencer {
            width: 14px;
            left: -50px;
            height: 12px;
            bottom: -1px;
            position: absolute;
            background: #271e01;
        }
        .machine .machine-roof .machine-silencer:before {
            height: 0;
            bottom: 100%;
            width: inherit;
            border: 6px solid #271e01;
            border-top: 4px solid transparent;
            border-left: 8px solid transparent;
        }
        .machine .machine-roof .machine-silencer:after {
            left: 4px;
            width: 5px;
            height: 12px;
            bottom: 100%;
            background: inherit;
            transform: skewY(-35deg);
        }
        .machine .machine-roof .machine-silencer .machine-smoke {
            left: -5px;
            width: 16px;
            height: 16px;
            bottom: 20px;
            border-radius: 50%;
            position: absolute;
            background: #271e01;
            transform: scale(0);
            animation: moveSmoke .5s linear infinite;
        }
        .machine-main {
            height: 60px;
            width: 185px;
            position: relative;
        }
        .machine .machine-main .machine-body {
            height: inherit;
            width: inherit;
            position: relative;
            background: #271e01;
        }
        .machine .machine-main .machine-body:before {
            left: -15px;
            width: 30px;
            height: inherit;
            background: inherit;
            transform: skewX(-20deg);
        }
        .machine .machine-main .machine-body:after {
            bottom: 0;
            right: 15px;
            width: 35px;
            height: 41px;
            background: #ffc600;
        }
        .machine .machine-main .machine-back {
            bottom: -1px;
            width: 75px;
            height: 45px;
            position: absolute;
        }
        .machine .machine-main .machine-back:before {
            width: 75px;
            height: 45px;
            background: #ffc600;
            border-radius: 50% 50% 0 0 / 85% 85% 0 0;
        }
        .machine .machine-main .machine-back:after {
            top: 50%;
            left: 50%;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin-top: -15px;.........完整代码请登录后点击上方下载按钮下载查看