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