CSS3实现工厂流水线动画代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3实现工厂流水线动画代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>CSS3实现工厂流水线动画</title>
    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>

<body>
    <div id="wraper">
        <!--Pauqetes-->
        <div id="stand1" class="stand"></div>
        <div id="stand2" class="stand"></div>
        <div id="band">
            <div id="wheel1" class="wheel"></div>
            <div id="wheel2" class="wheel"></div>
            <div id="wheel3" class="wheel"></div>
            <div id="wheel4" class="wheel"></div>
        </div>
        <div id="package1" class="package"></div>
        <!--Fin Pauqetes-->
        <div id="mainFactory"></div>
        <div id="door"></div>
        <div id="window1" class="window"></div>
        <div id="window2" class="window"></div>
        <div id="chim1"></div>
        <div id="chim2"></div>
        <div id="roof1"></div>
        <div id="roof2"></div>
        <div id="stripe1" class="stripe"></div>
        <div id="stripe2" class="stripe"></div>
        <div id="stripe3" class="stripe"></div>
        <div id="stripe4" class="stripe"></div>
        <div id="smoke1" class="smoke">
            <div id="sCloud1" class="sCloud"></div>
            <div id="sCloud2" class="sCloud"></div>
            <div id="sCloud3" class="sCloud"></div>
        </div>
        <div id="smoke2" class="smoke">
            <div id="sCloud4" class="sCloud"></div>
            <div id="sCloud5" class="sCloud"></div>
            <div id="sCloud6" class="sCloud"></div>
        </div>
        <div id="tree">
            <div id="branch"></div>
            <div id="leaves1" class="leaves"></div>
            <div id="leaves2" class="leaves"></div>
            <div id="leaves3" class="leaves"></div>
        </div>

    </div>
    <script type="text/javascript" src="js/logica.js">
    </script>
</body>
</html>

CSS代码(style.css):

body{background-color:#899E97;}
@-webkit-keyframes goSmoke{0%{opacity:0;}
75%{opacity:1;}
100%{opacity:0;-webkit-transform:scale(2,2) translateY(-20px) rotate(30deg);}
}
@-webkit-keyframes goWindow{0%{background-color:#F5F19A;}
100%{background-color:#D3BD54;}
}
@-webkit-keyframes goWheels{100%{-webkit-transform:rotate(360deg);}
}
@-webkit-keyframes goPackage{83%{-webkit-transform:translateX(120px);}
95%{-webkit-transform:translateX(130px) translateY(25px) rotate(90deg);}
100%{-webkit-transform:translateX(130px) translateY(25px) rotate(90deg);}
}
#wraper{width:400px;height:350px;margin:0 auto;position:relative;/*border:2px solid black;*/
}
.stand{width:10px;height:13px;position:absolute;background-color:#BCBEC0;top:279px;}
#stand1{left:251px;}
#stand2{left:321px;}
#band{width:100px;height:13px;border-top-right-radius:10px;border-bottom-right-radius:10px;position:absolute;background-color:#58595B;top:266px;left:241px;}
.wheel{width:12px;height:12px;border-radius:12px;background-color:#414042;position:absolute;/*-webkit-animation:goWheels 0.5s linear infinite normal;*/
}
.wheel:after{content:"";display:block;width:12px;height:2px;background-color:#F5F19A;position:absolute;top:5px;}
#wheel1{left:5px;-webkit-animation:goWheels 0.5s 0.1s linear infinite normal;}
#wheel2{left:31px;-webkit-animation:goWheels 0.5s 0.2s linear infinite normal;}
#wheel3{left:56px;-webkit-animation:goWheels 0.5s 0.3s linear infinite normal;}
#wheel4{left:79px;-webkit-animation:goWheels 0.5s 0.4s linear infinite normal;}
.package{width:20px;height:20px;position:absolute;background-color:#403F63;top:246px;left:220px;-webkit-animation:goPackage 2s 0.3s linear infinite normal;}
#mainFactory{width:150px;height:100px;background-color:#CFB499;position:absolute;top:195px;left:91px;}
#door{width:25px;height:40px;background-color:#403F63;position:absolute;top:255px;left:155px;}
#door:after{content:"";display:block;width:5px;height:5px;border-radius:5px;background-color:#F5F19A;position:absolute;top:21px;left:15px;}
.window{width:25px;height:25px;background-color:#F5F19A;position:absolute;border:2px solid #403F63;-webkit-transition:background-color 0.3s linear;-webkit-animation:goWindow 3s infinite alternate;}
#window1{top:216px;left:109px;}
#window2{top:216px;left:197px;}
#roof1{width:0px;height:0px;border-style:solid;border-width:0 0 33px 64px;border-color:transparent transparent #403F63 transparent;position:absolute;top:162px;left:91px;}
#roof2{width:0px;height:0px;border-style:solid;border-width:0 0 44px 86px;border-color:transparent transparent #403F63 transparent;position:absolute;top:151px;left:155px;}
#chim1{width:25px;height:80px;background-color:#E2C4A5;position:absolute;top:115px;left:155px;}
#chim2{width:25px;height:102px;background-color:#E2C4A5;position:absolute;top:93px;left:198px;}
.stripe{width:25px;height:10px;background-color:#BE1E2D;position:absolute;}
#stripe1{top:128px;left:155px;}
#stripe2{top:145px;left:155px;}
#stripe3{top:105px;left:198px;}
#stripe4{top:123px;left:198px;}
.smoke{width:19px;height:18px;position:absolute;opacity:0;}
.sCloud{width:60%;height:0.7em;background-color:#E6E7E8;position:absolute;border-radius:18px;}
#smoke1{top:91px;left:157px;-webkit-transition-property:opacity,webkit-transform;-webkit-transition-duration:1s,1s;-webkit-transition-timing-function:linear,linear;-webkit-animation:goSmoke 2s 0.3s infinite normal;}
#smoke2{top:71px;left:200px;-webkit-transition-property:opacity,webkit-transform;-webkit-transition-duration:1s,1s;-webkit-transition-timing-function:linear,linear;-webkit-animation:goSmoke 2s 1.3s infinite normal;}
#sCloud1,#sCloud4{top:2px;}
#sCloud2,#sCloud5{left:6px;}
#sCloud3,#sCloud6{top:6px;left:7px;}
#tree{width:54px;height:87px;position:absolute;top:208px;left:60px;}
#branch{width:9px;height:37px;position:absolute;background-color:#754C29;top:50px;left:23px;}
.leaves{width:35px;height:35px;background-color:#8DC63F;position:absolute;border-radius:18px;}
#leaves1{top:20px;}
#leaves2{left:10px;}
#leaves3{top:20px;left:19px;}

附件:下载该文件资源,减少时间成本(增值服务)