div+css实现饮料瓶流水线加工过程loading加载动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：div+css实现饮料瓶流水线加工过程loading加载动画效果代码

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

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

<head>
    <meta charset="UTF-8">

    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900'>
<style>
    body{
        margin:0;
        color:#444;
        background-color:#141414;
        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}

.loader-wrap{
        top:50%;
        left:50%;
        width:374px;
        height:194px;
        position:fixed;
        margin-top:-97px;
        margin-left:-187px;
}
.bar{
        height:5px;
        width:100%;
        margin:30px 0;
        position:relative;
        background-color:#444;
}
.bar:before{
        top:0;
        left:0;
        width:0;
        content:'';
        height:inherit;
        position:absolute;
        background-color:#FBCE13;
        -webkit-animation:bar 2500ms linear infinite;
                animation:bar 2500ms linear infinite;
}
.text{
        color:#FBCE13;
        font-size:24px;
        font-weight:500;
        text-align:center;
        letter-spacing:10px;
        text-transform:uppercase;
}
.cap{
        left:0;
        right:0;
        top:-15px;
        z-index:1;
        width:100%;
        position:absolute;
}
.cap>i{
        opacity:0;
        height:3px;
        width:16px;
        margin-left:12px;
        border-radius:3px;
        position:absolute;
        background-color:#FBCE13;
        -webkit-animation:move-cap 2500ms linear infinite;
                animation:move-cap 2500ms linear infinite;
}
.bottle-fill{
        -webkit-animation:waves 2500ms infinite linear, fill 2500ms infinite forwards;
                animation:waves 2500ms infinite linear, fill 2500ms infinite forwards;
}
.bottle-wrap{
        height:110px;
        position:relative;
}
.bottle{
        bottom:0;
        opacity:0;
        width:40px;
        text-align:center;
        position: absolute;
        display:inline-block;
        vertical-align:bottom;
        transform-origin:bottom right;
        transform:translateX(-300px);
        -webkit-animation:move 2500ms linear infinite;
                animation:move 2500ms linear infinite;
}
.bottle:before,
.bottle:after{
        left:50%;
        opacity:0;
        content:'';
        position:absolute;
        background-color:#FBCE13;
}
.bottle:before{
        opacity:1;
        width:4px;
        top:-40px;
        height:14px;
        margin-left:-2px;
        -webkit-animation:lock-cap 2500ms linear infinite;
                animation:lock-cap 2500ms linear infinite;
}
.bottle:after{
        top:0;
        height:4px;
        width:16px;
        margin-left:-8px;
        border-radius:4px;
        -webkit-animation:show-cap 2500ms linear infinite;
                animation:show-cap 2500ms linear infinite;
}
.cap>i:nth-child(2),
.bottle:nth-child(2),
.bottle:nth-child(2):before,
.bottle:nth-child(2):after,
.bottle:nth-child(2) .bottle-fill{
        -webkit-animation-delay:625ms;
                animation-delay:625ms;
}
.cap>i:nth-child(3),
.bottle:nth-child(3),
.bottle:nth-child(3):before,
.bottle:nth-child(3):after,
.bottle:nth-child(3) .bottle-fill{
        -webkit-animation-delay:1250ms;
                animation-delay:1250ms;
}
.cap>i:nth-child(4),
.bottle:nth-child(4),
.bottle:nth-child(4):before,
.bottle:nth-child(4):after,
.bottle:nth-child(4) .bottle-fill{
        -webkit-animation-delay:1875ms;
                animation-delay:1875ms;
}
.bottle svg{vertical-align:bottom;display:block;margin:auto}

@-webkit-keyframes waves{
        0%{ x:-200px }
        25%{ x:-100px }
        50%{ x:-200px }
        75%,
        100%{ x:-40px }
}

@keyframes waves{
        0%{ x:-200px }
        25%{ x:-100px }
        50%{ x:-200px }
        75%,
        100%{ x:-40px }
}
@-webkit-keyframes fill{
        0%{ height:0; y:125px}
        30%,
        100%{ height:100px; y:25px}
}
@keyframes fill{
        0%{ height:0; y:125px}
        30%,
        100%{ height:100px; y:25px}
}

@-webkit-keyframes move{
        0%{
                opacity:0;
                transform:translateX(0);
        }
        25%{
                opacity:1;
                transform:translateX(75px);
        }
        48%{transform:translateX(144px) translateY(0);}
        50%{
                transform:translateX(150px) translateY(-10px);
        }
        52%{transform:translateX(156px) translateY(0);}
        75%{
                opacity:1;
                transform:translateX(225px);
        }
        100%{
                opacity:0;
                transform:translateX(300px);
        }
}

@keyframes move{
        0%{
                opacity:0;
                transform:translateX(0);
        }
        25%{
                opacity:1;
                transform:translateX(75px);
        }
        48%{transform:translateX(144px) translateY(0);}
        50%{
                transform:translateX(150px) translateY(-10px);
        }
        52%{transform:translateX(156px) translateY(0);}
        75%{
                opacity:1;
                transform:translateX(225px);
        }
        100%{
                opacity:0;
                transform:translateX(300px);
        }
}
@-webkit-keyframes move-cap{
        0%{
                opacity:0;
                transform:translate(0,0);
        }
        25%{
                opacity:1;
                transform:translate(75px,0);
        }
        45%{opacity:1}
        48%{transform:translate(144px, 0)}
        50%{
                transform:translate(150px,10px);
        }
        52%{opacity:0}
        75%{
                transform:translate(225px,0);
        }
        100%{
                opacity:0;
                transform:translate(300px,0);
        }
}
@keyframes move-cap{
        0%{
                opacity:0;
                transform:translate(0,0);
        }
        25%{
                opacity:1;
                transform:translate(75px,0);
        }
        45%{opacity:1}
        48%{transform:translate(144px, 0)}
        50%{
                transform:translate(150px,10px);
        .........完整代码请登录后点击上方下载按钮下载查看