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