文件上传组件

效果演示

实现了一个SVG动画效果，其中包含了三个动画元素：Utveckling、Pil和Bock。Utveckling是一个线条，Pil是一个矩形，Bock是一个圆形。三个元素分别使用不同的动画效果，且三个元素的位置、大小、颜色等属性都不同。整个动画效果是一个循环的，每秒钟播放6.5秒。

Code

<svg width="100" height="100" viewBox="0 0 100 100">
    <defs>
        <clipPath id="clipIt">
            <circle fill="black" r="35" cy="50" cx="50" />
        clipPath>
    defs>
    <path class="utveckling" d="M 49.99955,21.646452 A 28.35355,28.353548 0 0 0 21.646,50
            28.35355,28.353548 0 0 0 49.99955,78.353548
            28.35355,28.353548 0
            0 0 78.3531,50 28.35355,28.353548 0 0 0 49.99955,21.646452
            Z" />
    <g class="cut" clip-path="url(#clipIt)">
        <circle r="35" cy="50" cx="50"
            style="opacity:1;fill:#1939ff;fill-opacity:1;stroke:none;stroke-width:12.9174" />
        <g class="pil">
            <path d="m 40.056531,47.971893 9.914191,-9.514425
                            9.994144,9.514425"
                style="fill:none;stroke:#ffffff;stroke-width:3.8;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" />
            <path d="M 49.970722,38.457468 V 61.56393"
                style="fill:none;stroke:#ffffff;stroke-width:3.8;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" />
        g>
        <path class="bock" d="m 49.533063,13 c 0,0
                                -4.038975,0.243204 -7.084664,1.6
                                -10.965877,4.88509 -12.03936,12.900449
                                -12.029016,15.995361 0.02524,7.552595
                                4.607455,12.168562 6.129905,13.956538 C
                                41.41924,50.271203 47.447623,56.491
                                47.447623,56.491 L 63.320719,42.911532" />
    g>
svg>

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #212121;
}

.utveckling {
  animation: Utveckling 6.5s infinite;
  stroke-width: 10;
  fill: none;
  stroke: #5f7cfb;
}

.pil {
  animation: Pil 6.5s infinite;
}

.bock {
  animation: Bock 6.5s infinite;
  fill: none;
  stroke-dasharray: 31 82;
  stroke-dasharray: none;
  stroke-dashoffset: -47px;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 4;
  stroke-width: 4;
  stroke: #ffffff;
}

@keyframes Pil {
  0% {
    transform: translateY(0);
  }

  6% {
    transform: translateY(-65px);
  }

  62.49% {
    transform: translateY(-65px);
  }

  62.5% {
    transform: translateY(65px);
  }

  68.5% {
    transform: translateY(0px);
  }
}

@keyframes Utveckling {
  0% {
    stroke-width: 10;
  }

  3.1% {
    stroke-width: 10;
    stroke-dasharray: 1 179;
  }

  3.6% {
    stroke-width: 25;
    stroke-dasharray: 1 179;
  }

  28% {
    stroke-width: 25;
    stroke-dasharray: 174 179;
  }

  34% {
    stroke-width: 10;
    stroke-dasharray: 179 179;
  }

  100% {
    stroke-width: 10;
    stroke-dasharray: 179 179;
  }
}

@keyframes Bock {
  0% {
    stroke-dasharray: 1 82;
    stroke-dashoffset: 0px;
  }

  29% {
    stroke-dasharray: 1 82;
    stroke-dashoffset: 0px;
  }

  35% {
    stroke-dasharray: 31 82;
    stroke-dashoffset: -50px;
  }

  62% {
    stroke-dasharray: 31 82;
    stroke-dashoffset: -50px;
    transform: translateY(0px);
  }

  68% {
    stroke-dasharray: 31 82;
    stroke-dashoffset: -50px;
    transform: translateY(-65px);
  }

  100% {
    stroke-dasharray: 31 82;
    stroke-dashoffset: -50px;
    transform: translateY(-65px);
  }
}

实现思路拆分

body {
  height: 100vh; /* 设置body元素的高度为视口高度 */
  display: flex; /* 设置body元素为flex布局 */
  justify-content: center; /* 设置flex容器中子元素的水平对齐方式为居中对齐 */
  align-items: center; /* 设置flex容器中子元素的垂直对齐方式为居中对齐 */
  background-color: #212121; /* 设置body元素的背景颜色为深灰色 */
}

这段代码定义了body元素的样式，包括高度、布局方式、对齐方式和背景颜色等。

.utveckling {
  animation: Utveckling 6.5s infinite; /* 定义一个名为Utveckling的动画，持续时间为6.5秒，无限循环 */
  stroke-width: 10; /* 设置线条的宽度为10 */
  fill: none; /* 不填充线条 */
  stroke: #5f7cfb; /* 设置线条的颜色为蓝色 */
}

这段代码定义了一个名为utveckling的SVG元素的样式，包括动画效果、线条宽度、线条颜色等。

.pil {
  animation: Pil 6.5s infinite; /* 定义一个名为Pil的动画，持续时间为6.5秒，无限循环 */
}

这段代码定义了一个名为pil的SVG元素的样式，包括动画效果。

.bock {
  animation: Bock 6.5s infinite; /* 定义一个名为Bock的动画，持续时间为6.5秒，无限循环 */
  fill: none; /* 不填充圆形 */
  stroke-dasharray: 31 82; /* 设置线条的虚线长度为31，间隙长度为82 */
  stroke-dashoffset: -47px; /* 设置线条的虚线起始位置为-47px */
  stroke-linecap: butt; /* 设置线条的端点样式为butt */
  stroke-linejoin: miter; /* 设置线条的拐点样式为miter */
  stroke-miterlimit: 4; /* 设置线条的拐点限制为4 */
  stroke-width: 4; /* 设置线条的宽度为4 */
  stroke: #ffffff; /* 设置线条的颜色为白色 */
}

这段代码定义了一个名为bock的SVG元素的样式，包括动画效果、圆形填充、线条虚线长度、线条虚线起始位置、线条端点样式、线条拐点样式、线条拐点限制、线条宽度和线条颜色等。

@keyframes Pil {
  0% {
    transform: translateY(0); /* 元素在动画开始时沿着y轴向上移动0px */
  }

  6% {
    transform: translateY(-65px); /* 元素在动画进行到6%时沿着y轴向上移动65px */
  }

  62.49% {
    transform: translateY(-65px); /* 元素在动画进行到62.49%时沿着y轴向上移动65px */
  }

  62.5% {
    transform: translateY(65px); /* 元素在动画进行到62.5%时沿着y轴向下移动65px */
  }

  68.5% {
    transform: translateY(0px); /* 元素在动画进行到68.5%时沿着y轴向下移动0px */
  }
}

这段代码定义了一个名为Pil的动画，包括动画的关键帧和属性值。在0%时，元素沿着y轴向上移动0px；在6%时，元素沿着y轴向上移动65px；在62.49%时，元素沿着y轴向上移动65px；在62.5%时，元素沿着y轴向下移动65px；在68.5%时，元素沿着y轴向下移动0px；在100%时，元素保持原来的位置。

@keyframes Utveckling {
  0% {
    stroke-width: 10; /* 线条宽度为10 */
  }

  3.1% {
    stroke-width: 10; /* 线条宽度为10 */
    stroke-dasharray: 1 179; /* 线条虚线长度为1，间隙长度为179 */
  }

  3.6% {
    stroke-width: 25; /* 线条宽度为25 */
    stroke-dasharray: 1 179; /* 线条虚线长度为1，间隙长度为179 */
  }

  28% {
    stroke-width: 25; /* 线条宽度为25 */
    stroke-dasharray: 174 179; /* 线条虚线长度为174，间隙长度为179 */
  }

  34% {
    stroke-width: 10; /* 线条宽度为10 */
    stroke-dasharray: 179 179; /* 线条虚线长度为179，间隙长度为179 */
  }

  100% {
    stroke-width: 10; /* 线条宽度为10 */
    stroke-dasharray: 179 179; /* 线条虚线长度为179，间隙长度为179 */
  }
}

这段代码定义了一个名为Utveckling的动画，包括动画的关键帧和属性值。在0%时，线条宽度为10，线条虚线长度为1，间隙长度为179；在3.1%时，线条宽度为10，线条虚线长度为1，间隙长度为179；在3.6%时，线条宽度为25，线条虚线长度为1，间隙长度为179；在28%时，线条宽度为25，线条虚线长度为174，间隙长度为179；在34%时，线条宽度为10，线条虚线长度为179，间隙长度为179；在100%时，线条宽度为10，线条虚线长度为179，间隙长度为179。

@keyframes Bock {
  0% {
    stroke-dasharray: 1 82; /* 线条虚线长度为1，间隙长度为82 */
    stroke-dashoffset: 0px; /* 线条虚线起始位置为0px */
  }

  29% {
    stroke-dasharray: 1 82; /* 线条虚线长度为1，间隙长度为82 */
    stroke-dashoffset: 0px; /* 线条虚线起始位置为0px */
  }

  35% {
    stroke-dasharray: 31 82; /* 线条虚线长度为31，间隙长度为82 */
    stroke-dashoffset: -50px; /* 线条虚线起始位置为-50px */
  }

  62% {
    stroke-dasharray: 31 82; /* 线条虚线长度为31，间隙长度为82 */
    stroke-dashoffset: -50px; /* 线条虚线起始位置为-50px */
    transform: translateY(0px); /* 元素沿着y轴向上移动0px */
  }

  68% {
    stroke-dasharray: 31 82; /* 线条虚线长度为31，间隙长度为82 */
    stroke-dashoffset: -50px; /* 线条虚线起始位置为-50px */
    transform: translateY(-65px); /* 元素沿着y轴向上移动65px */
  }

  100% {
    stroke-dasharray: 31 82; /* 线条虚线长度为31，间隙长度为82 */
    stroke-dashoffset: -50px; /* 线条虚线起始位置为-50px */
    transform: translateY(-65px); /* 元素沿着y轴向上移动65px */
  }
}

这段代码定义了一个名为Bock的动画，包括动画的关键帧和属性值。在0%时，线条虚线长度为1，间隙长度为82，线条虚线起始位置为0px；在29%时，线条虚线长度为1，间隙长度为82，线条虚线起始位置为0px；在35%时，线条虚线长度为31，间隙长度为82，线条虚线起始位置为-50px；在62%时，线条虚线长度为31，间隙长度为82，线条虚线起始位置为-50px，元素沿着y轴向上移动0px；在68%时，线条虚线长度为31，间隙长度为82，线条虚线起始位置为-50px，元素沿着y轴向上移动65px；在100%时，线条虚线长度为31，间隙长度为82，线条虚线起始位置为-50px，元素沿着y轴向上移动65px。