svg火柴人做出十种不同姿势动作动画效果代码-html代码-BFW代码库

svg火柴人做出十种不同姿势动作动画效果代码

代码语言：html

所属分类：动画

代码描述：svg火柴人做出十种不同姿势动作动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  
  
<style>
:root {
        --easing: ease-in;
        --bar-duration: 1s;
        --line-width: 10px;
}

body {
        height: 100vh;
        font-family: sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
}

.podium {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        height: 100%;
}

line {
        stroke-width: var(--line-width);
        stroke: black;
        stroke-linecap: round;
}

.upper-body {
        animation: twist var(--bar-duration) var(--easing) infinite;
}

.leg {
        animation: bend var(--bar-duration) var(--easing) infinite;
}

.arm {
        animation: twist var(--bar-duration) var(--easing) alternate infinite;
}

.head {
        animation: bend var(--bar-duration) var(--easing) infinite;
}

@keyframes twist {
        33% {
                transform: rotate(30deg);
        }
        66% {
                transform: rotate(-30deg);
        }
}

@keyframes bend {
        40% {
                transform: rotate(5deg);
        }
        60% {
                transform: rotate(-5deg);
        }
}
</style>

  
  
</head>

<body translate="no">
  <div class="podium" style="--dancers-count: 10;">
  <svg viewBox="0 0 200 400" xmlns="http://www.w3.org/2000/svg">
    <g class="upper-body" transform-origin="100px 150px" style="animation-delay: 0s;">
      <circle class="head" cx="100" cy="65" r="15"></circle>
      <line class="body" x1="100" y1="70" x2="100" y2="150"></line>
      <g class="left-arm arm" transform-origin="100px 90px" style="animation-delay: 0s;">
        <line class="left-upper-arm" x1="100" y1="90" x2="60" y2="120"></line>
        <line class="left-lower-arm" x1="60" y1="120" x2="40" y2="170"></line>
        <!-- check what happens when you remove x2 and y2 above-->
      </g>
      <g class="right-arm arm" transform-origin="100px 90px" style="animation-delay: 0s;">
        <line class="right-upper-arm" x1="100" y1="90" x2="140" y2="120"></line>
        <line class="right-lower-arm" x1="140" y1="120" x2="160" y2="170"></line>
      </g>
    </g>
    <g class="left-leg leg" transform-origin="75px 210px">
      <line class="left-upper-leg" x1="100" y1="150" x2="80" y2="210"></line>
      <line class="left-lower-leg lower-leg" x1="80" y1="210" x2="75" y2="270"></line>
      <line class="left-foot" x1="75" y1="270" x2="55" y2="270"></line>
    </g>
    <g class="right-leg leg" transform-origin="125px 210px">
      <line class="right-upper-leg" x1="100" y1="150" x2="120" y2="210"></line>
      <line class="right-lower-leg lower-leg" x1="120" y1="210" x2="125" y2="270"></line>
      <line class="right-foot" x1="125" y1="270" x2="145" y2="270"></line>
    </g>
  </svg>
  <svg viewBox="0 0 200 400" xmlns="http://www.w3.org/2000/svg">
    <g class="upper-body" transform-origin="100px 150px" style="animation-delay: 0.2s;">
      <circle class="head" cx="100" cy="65" r="15"></circle>
      <line class="body" x1="100" y1="70" x2="100" y2="150"></line>
      <g class="left-arm arm" transform-origin="100px 90px" style="animation-delay: 0.2s;">
        <line class="left-upper-arm" x1=&qu.........完整代码请登录后点击上方下载按钮下载查看