svg+zdog实现产品生产线组装线动画效果代码-html代码-BFW代码库

svg+zdog实现产品生产线组装线动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+zdog实现产品生产线组装线动画效果代码

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

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

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

  
  
<style>
* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

body {
	color: hsl(187 53% 97%);
	background: hsl(211 41% 20);
	min-block-size: 100svb;
	display: grid;
	place-items: center;
	font-family: system-ui;
}

.layout {
	--_color-000: hsl(210 12% 10%);
	--_color-100: hsl(220 9% 19%);
	--_color-200: hsl(219 9% 36%);
	--_color-300: hsl(210 98% 95%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.controls {
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	gap: 0.5rem;
}

p {
	min-block-size: 1lh;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.05rem;
	padding: 0.5rem 1rem;
	color: var(--_color-300, hsl(0 0% 95));
	background: var(--_color-200, hsl(0 0% 30%));
	border-radius: 1e5px;
}

button {
	display: block;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	padding: 0.6rem;
	color: var(--_color-300, hsl(0 0% 95));
	background: var(--_color-200, hsl(0 0% 30%));
	border: none;
	border-radius: 1e5px;
	transition-property: opacity, border-block-end-width;
	transition-duration: 0.2s, 0.1s;
	transition-timing-function: ease-in-out;
}

button > svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

p,
button {
	border-block-end: 0.2rem solid var(--_color-100, hsl(0 0% 20%));
	transform: perspective(200px) rotateX(10deg);
	transform-origin: 50% 100%;
}

button:disabled {
	opacity: 0.4;
}

button:not(:disabled):active {
	border-block-end-width: 0;
}

body {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">\
    <path fill="none" stroke=.........完整代码请登录后点击上方下载按钮下载查看