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="hsl(0 0% 100%)" stroke-opacity="0.1" stroke-width="0.1" d="M 0.25 0 A 0.25 0.25 0 0 1 0 0.25 M 1 0 1 1 0 1 M 0 2.5 0.5 2 0.75 2 A 0.25 0.25 0 0 1 1.25 2 0.25 0.25 0 0 1 0.75 2 M 0 4 0.5 4 2 2.5 2 0 M 0 5 0.75 5 A 0.25 0.25 0 0 1 1.25 5 0.25 0.25 0 0 1 0.75 5 M 0 5.75 A 0.25 0.25 0 0 1 0 6.25 M 0 7 2 7 2 10 M 0 8 0.75 8 A 0.25 0.25 0 0 1 1.25 8 0.25 0.25 0 0 1 0.75 8 M 0 9 1 9 1 10 M 0 9.75 A 0.25 0.25 0 0 1 0.25 10 M 3 0 3 0.75 A 0.25 0.25 0 0 1 3 1.25 0.25 0.25 0 0 1 3 0.75 M 2.25 6 A 0.25 0.25 0 0 1 1.75 6 0.25 0.25 0 0 1 2.25 6 L 3 6 3 10 M 5 1.25 A 0.25 0.25 0 0 1 5 0.75 0.25 0.25 0 0 1 5 1.25 L 5 2.5 3.5 4 2.25 4 A 0.25 0.25 0 0 1 1.75 4 0.25 0.25 0 0 1 2.25 4 M 6 2.25 A 0.25 0.25 0 0 1 6 1.75 0.25 0.25 0 0 1 6 2.25 L 6 3.5 4.5 5 3.25 5 A 0.25 0.25 0 0 1 2.75 5 0.25 0.25 0 0 1 3.25 5 M 6 0 4 0 4 2 3.25 2 A 0.25 0.25 0 0 1 2.75 2 0.25 0.25 0 0 1 3.25 2 M 7 10 7 9 6 9 6 10 4 10 M 7 0 7 0.75 A 0.25 0.25 0 0 1 7 1.25 0.25 0.25 0 0 1 7 0.75 M 10 2.5 9.5 3 8.25 3 A 0.25 0.25 0 0 1 7.75 3 0.25 0.25 0 0 1 8.25 3 M 10 4 7 4 7 2.25 A 0.25 0.25 0 0 1 7 1.75 A 0.25 0.25 0 0 1 7 2.25 M 8 0 8 2 8.75 2 A 0.25 0.25 0 0 1 9.25 2 0.25 0.25 0 0 1 8.75 2 M 9 0 9 1 10 1 M 9.75 0 A 0.25 0.25 0 0 0 10 0.25 M 10 5 5.5 5 4 6.5 4 8.75 A 0.25 0.25 0 0 1 4 9.25 0.25 0.25 0 0 1 4 8.75 M 9 6 6.25 6 A 0.25 0.25 0 0 1 5.75 6 0.25 0.25 0 0 1 6.25 6 M 5 7 7.75 7 A 0.25 0.25 0 0 1 8.25 7 0.25 0.25 0 0 1 7.75 7 M 5.25 8 A 0.25 0.25 0 0 1 4.75 8 0.25 0.25 0 0 1 5.25 8 L 8 8 8 10 M 10 5.75 A 0.25 0.25 0 0 0 10 6.25 M 10 7 9.25 7 A 0.25 0.25 0 0 1 8.75 7 0.25 0.25 0 0 1 9.25 7 M 10 8 9.25 8 A 0.25 0.25 0 0 1 8.75 8 0.25 0.25 0 0 1 9.25 8 M 10 9 9 9 9 10 M 10 9.75 A 0.25 0.25 0 0 0 9.75 10" />\
</svg>');
background-size: 10rem;
}
</style>
</head>
<body translate="no">
<div class="layout">
<canvas style="display: block; inline-size: 100%; max-inline-size: 500px" width="500" height="250"></canvas>
<p>Assemble</p>
<div class="controls">
<button aria-label="Previous step" data-action="prev" disabled>
<svg aria-hidden="true" width="1em" height="1em" viewBox="-3.75 -6.75 7.5 13.5">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M -3.25 6.25 -1.75 6.25 A 5 5 0 0 0 -1.75 -3.75 L -3.25 -3.75 -0.75 -6.25 -3.25 -3.75 -0.75 -1.25" />
</svg>
</button>
<button aria-label="Next step" data-action="next" disabled>
<svg aria-hidden="true" width="1em" height="1em" viewBox="-3.75 -6.75 7.5 13.5">
<path transform="scale(-1 1)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M -3.25 6.25 -1.75 6.25 A 5 5 0 0 0 -1.75 -3.75 L -3.25 -3.75 -0.75 -6.25 -3.25 -3.75 -0.75 -1.25" />
</svg>
</button>
</div>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zdog.dist.js"></script>
<script >
const { Anchor, Ellipse, Shape } = Zdog;
(() => {
const ease = t => {
if ((t *= 2) < 1) return 0.5 * t * t * t * t * t;
return 0.5 * ((t -= 2) * t * t * t * t + 2);
};
const quartOut = t => {
return Math.pow(t - 1.0, 3.0) * (1.0 - t) + 1.0;
};
const backInOut = t => {
const s = 1.70158 * 1.525;
if ((t *= 2) < 1) return 0.5 * (t * t * ((s + 1) * t - s));
return 0.5 * ((t -= 2) * t * ((s + 1) * t + s) + 2);
};
const PI = Math.PI;
const TAU = PI * 2;
const colors = {
belt: ["hsl(220 14% 25%)", "hsl(210 20% 91%)"],
box: ["hsl(216 9% 32%)", "hsl(219 9% 36%)", "hsl(220 8% 41%)"],
star: ["hsl(159 61% 63%)", "hsl(169 82% 44%)"],
assembly: [
"hsl(220 9% 19%)",
"hsl(219 9% 46%)",
"hsl(210 20% 91%)",
"hsl(169 82% 44%)"] };
const strokes = {
belt: [6, 0.5],
star: [4, 1],
box: 3 };
const radius = 50;
const spread = 12;
const root = new Anchor();
new Ellipse({
addTo: root,
color: colors.belt[0],
stroke: strokes.belt[0],
diameter: radius * 2,
rotate: {
x: TAU / 4 } });
new Ellipse({
addTo: root,
color: colors.belt[1],
stroke: strokes.belt[1],
diameter: radius * 2,
translate: {
y: strokes.belt[0] / 2 * -1 },
rotate: {
x: TAU / 4 } });
new Shape({
addTo: root,
color: colors.box[0],
stroke: strokes.box,
fill: true,
path: [
{ x: spread, y: 0, z: 0 },
{ x: spread * -1, y: 0, z: 0 },
{ x: spread * -1, y: spread * 2 * -1, z: 0 },
{ x: spread, y: spread * 2 * -1, z: 0 }] });
new Shape({
addTo: root,
color: colors.box[1],
stroke: strokes.box,
fill: true,
path: [
{ x: spread * -1, y: spread * 2 * -1, z: 0 },
{ x: spread * -1, y: spread * 2 * -1, z: (radius + spread / 2) * -1 },
{ x: spread, y: spread * 2 * -1, z: (radius + spread / 2) * -1 },
{ x: spread, y: spread * 2 * -1, z: 0 }] });
new Shape({
addTo: root,
color: colors.box[2],
stroke: strokes.box,
fill: true,
path: [
{ x: spread * -1, y: spread * 2 * -1, z: (radius + spread / 2) * -1 },
{ x: spread, y: spread * 2 * -1, z: (radius + spread / 2) * -1 },
{ x: spread, y: 0, z: (radius + spread / 2) * -1 },
{ x: spread * -1, y: 0, z: (radius + spread / 2) * -1 }] });
const path = (() => {
const [r1, r2] = [spread * 0.35, spread * 0.6];
return Array(10).
fill().
map((_, i, { length }) => {
const r = i % 2 === 0 ? r1 : r2;
const angle = TAU / 4 + TAU / length * i;
const x = Math.cos(angle) * r;
const y = Math.sin(angle) * r;
return { x, y };
});
})();
const pathSmall = (() => {
const [r1, r2] = [spread * 0.16, spread * 0.25];
return Array(10).
fill().
map((_, i, { length }) => {
const r = i % 2 === 0 ? r1 : r2;
const angle = TAU / 4 + TAU / length * i;
const x = Math.cos(angle) * r;
const y = Math.sin(angle) * r;
return { x, y };
});
})();
const star = new Shape({
addTo: root,
color: colors.star[0],
stroke: strokes.star[0],
fill: true,
path,
translate: {
y: spread * -1,
z: strokes.star[0] / 2 } });
const stars = new Anchor({
addTo: root,
translate: {
y: spread * -1,
z: radius * -1 } });
new Shape({
addTo: stars,
color: colors.star[1],
stroke: strokes.star[1],
fill: true,
path: pathSmall,
translate: {
x: spread * 1.5,
y: spread / 2 * -1 } });
new Shape({
addTo: stars,
color: colors.star[1],
stroke: strokes.star[1],
fill: true,
path: pathSmall,
translate: {
x: spread * 1..........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0