div+css实现饮料瓶流水线加工过程loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:div+css实现饮料瓶流水线加工过程loading加载动画效果代码
代码标签: 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); } 52%{opacity:0} 75%{ transform:translate(225px,0); } 100%{ opacity:0; transform:translate(300px,0); } } @-webkit-keyframes show-cap{ 0%,45%{opacity:0} 48%,90%{opacity:1} } @keyframes show-cap{ 0%,45%{opacity:0} 48%,90%{opacity:1} } @-webkit-keyframes lock-cap{ 0%,45%,48%,100%{opacity:0;transform:translateY(-10px)} 46%,47%{opacity:1;;transform:translateY(0)} } @keyframes lock-cap{ 0%,45%,48%,100%{opacity:0;transform:translateY(-10px)} 46%,47%{opacity:1;;transform:translateY(0)} } @-webkit-keyframes bar{ 0%{width:0} 100%{width:100%} } @keyframes bar{ 0%{width:0} 100%{width:100%} } </style> </head> <body> <!-- partial:index.partial.html --> <div class="loader-wrap"> <div class="bottle-wrap"> <div class="cap"><i></i><i></i><i></i><i></i></div> <div class="bottle"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="26.81px" height="106.124px" viewBox="0 0.5 26.81 106.124" enable-background="new 0 0.5 26.81 106.124" xml:space="preserve"> <defs> <pattern id="water_fill" width=".25" height="1.1" patternContentUnits="objectBoundingBox"> <path fill="#FBCE13" d="M0.25,1H0c0,0,0-0.659,0-0.916c0.083-0.303,0.158,0.334,0.25,0C0.25,0.327,0.25,1,0.25,1z"/> </pattern> <path id="bottle" d="M17.905,38.109V9.734c0,0,1.75-3.125,1.375-5.5s-5.875-2.232-5.875-2.232s-5.5-0.143-5.875,2.232 s1.375,5.5,1.375,5.5v28.375c0,0-7.405,1.311-7.405,16.03s0,40.72,0,45.47s5.515,5.515,5.515,5.515h6.39h6.39 c0,0,5.515-0.765,5.515-5.515s0-30.75,0-45.47S17.905,38.109,17.905,38.109z"/> <mask id="bottle_mask"> <use x="0" y="0" xlink:href="#bottle" opacity="1" fill="#ffffff"/> </mask> </defs> <rect class="bottle-fill" mask="url(#bottle_mask)" fill="url(#water_fill)" x="-400" y="0" width="1600" height="120"/> <path id="btl-out" fill="none" s.........完整代码请登录后点击上方下载按钮下载查看
网友评论0