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

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

代码语言：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: .........完整代码请登录后点击上方下载按钮下载查看