svg+css实现啤酒瓶加工加载loading动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：svg+css实现啤酒瓶加工加载loading动画效果代码

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

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

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

  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  
  
  
<style>
* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--hue: 223;
	--bg: hsl(var(--hue),10%,80%);
	--fg: hsl(var(--hue),10%,10%);
	--trans-dur: 0.3s;
	font-size: calc(16px + (24 - 16) * (100vw - 320px) / (2560 - 320));
}
body {
	background-color: var(--bg);
	color: var(--fg);
	display: flex;
	font: 1em/1.5 sans-serif;
	height: 100vh;
	transition:
		background-color var(--trans-dur),
		color var(--trans-dur);
}
.pl {
	display: block;
	margin: auto;
	width: 16em;
	height: auto;
}
.pl__bottles,
.pl__bottle--bounce,
.pl__bottle--in,
.pl__bottle--out,
.pl__cap--on,
.pl__fill--full,
.pl__fill--half,
.pl__fill--startle1,
.pl__fill--startle2,
.pl__rod {
	animation: move-right 0.6s linear infinite;
}
.pl__bottle {
	transform-origin: 8px 56px;
}
.pl__bottle--bounce {
	animation-name: bounce;
}
.pl__bottle--in,
.pl__bottle--out {
	animation-name: fade-in;
}
.pl__bottle--in {
	opacity: 0;
}
.pl__bottle--out {
	animation-direction: reverse;
}
.pl__bottle--out ~ .pl__bottle {
	opacity: 0;
}
.pl__bottle-glass,
.pl__cap,
.pl__rod {
	stroke: hsl(var(--hue),10%,30%);
}
.pl__bottle-glass {
	fill: hsla(var(--hue),10%,30%,0.05);
	transition:
		fill var(--trans-dur),
		stroke var(--trans-dur);
}
.pl__bottle-glare {
	stroke: hsl(0,0%,100%);
}
.pl__cap,
.pl__rod {
	transition: stroke var(--trans-dur);
}
.pl__cap {
	fill: hsl(0,0%,100%);
}
.pl__cap--on {
	animation-name: cap-on;
	animation-timing-function: ease-in;
}
.pl__fill {
	fill: hsla(43,90%,50%,0.8);
	stroke: hsl(43,90%,95%);
	stroke-width: 4px;
}
.pl__fill--full {
	animation-name: fill-up-full;
}
.pl__fill--half {
	animation-name: fill-up-half;
}
.pl__fill--startle1 {
	animation-name: fill-startle1;
}
.pl__fill--startle2 {
	animation-name: fill-startle2;
}
.pl__rod {
	animation-name: down-up;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: hsl(var(--hue),10%,20%);
		--fg: hsl(var(--hue),10%,90%);
	}
	.pl__bottle-glass,
	.pl__cap,
	.pl__rod {
		stroke: hsl(var(--hue),10%,50%);
	}
	.pl__bottle-glass {
		fill: hsla(var(--hue),10%,50%,0.05);
	}
}
/* Animations */
@keyframes bounce {
	from,
	50%,
	to {
		animation-timing-function: ease-out;
		transform: translate(56px,0) scale(1,1);
	}
	66.7% {
		animation-timing-function: ease-in;
		transform: translate(56px,0) scale(1.1,0.9);
	}
	83.3% {
		animation-timing-function: ease-out;
		transform: translate(56px,0) scale(0.95,1.05);
	}
}
@keyframes cap-on {
	from { transform: translate(0,0); }
	50%,
	to { transform: translate(0,23px); }
}
@keyframes fill-startle1 {
	from { transform: translate(0,8px); }
	to { transform: translate(-20px,8px); }
}
@keyframes fill-startle2 {
	from { transform: translate(-20px,8px); }
	25% { transform: translate(-30px,8px); }
	to { transform: translate(0,8px); }
}
@keyframes fill-up-half {
	from { transform: translate(-30px,56px); }
	to { transform: translate(-15px,32px); }
}
@keyframes fill-up-full {
	from { transform: translate(-15px,32px); }
	to { transform: translate(0,8px); }
}
@keyframes move-right {
	from { transform: translate(0,24px); }
	to { transform: translate(28px,24px); }
}
@keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes down-up {
	from,
	to {
		animation-timing-function: ease-in;
		transform: translate(0,0);
	}
	50% {
		animation-timing-function: ease-out;
		transform: translate(0,24px);
	}
	66.7% {
		animation-timing-function: ease-in;
		transform: translate(0,31px);
	}
}
</style>


  
  
</head>

<body translate="no">
  <svg class="pl" viewBox="0 0 128 82" width="128px" height="82px">
	<symbol id="pl-bottle">
		<path d="m16.493,26.641c-.494-1.023-1.282-2.025-1.579-2.402-.037-.047-.064-.081-.079-.101-.008-.011-.02-.027-.036-.048-.431-.566-1.154-1.761-1.154-3.399,0-2.129-.174-6.086-.456-8.768-.118-1.127-.233-2.248-.325-3.149-.089-.867-.139-1.359-.171-1.646.192-.24.345-.489.345-.786,0-.144-.04-.358-.266-1.426-.021-.1-.045-.211-.068-.321.093-.066.171-.152.225-.251.177-.325.186-1.539-.115-2.16-.353-.73-1.14-1.184-2.054-1.184h-3.521c-.915,0-1.702.454-2.055,1.184-.302.624-.29,1.838-.112,2.162.054.098.131.183.223.249-.023.108-.046.216-.066.315-.228,1.074-.268,1.289-.268,1.434,0,.299.153.547.346.787-.029.267-.075.712-.153,1.472-.095.928-.218,2.121-.343,3.322-.281,2.693-.456,6.648-.456,8.768,0,1.638-.723,2.832-1.153,3.399-.016.021-.028.037-.036.048-.014.019-.041.053-.078.101-.297.377-1.085,1.379-1.579,2.401-.582,1.204-.512,2.868-.499,3.1.002.737.05,20.319.051,21.504-.072,2.848.333,4.272,1.399,4.911,1.262.783,5.324.844,6.541.844s5.28-.061,6.541-.845c1.066-.639,1.471-2.064,1.398-4.911,0-1.238.05-20.764.052-21.503.013-.233.084-1.897-.498-3.1Z" />
	</symbol>
	<symbol id="pl-liquid">
		<path d="m48,56H0V0c3.926,0,4.265,1,8,1,2.016,0,4.44-1,8-1,3.465,0,5.124,1,8,1,3.766,0,4.491-1,8-1,3.601,0,4.706,1,8,1,3.731,0,4.303-1,8-1v56Z" transform="translate(0,2)" />
	</symbol>
	<defs>
		<clipPath id="pl-bottle-clip">
			<path d="m16.493,26.641c-.494-1.023-1.282-2.025-1.579-2.402-.037-.047-.064-.081-.079-.101-.008.........完整代码请登录后点击上方下载按钮下载查看