svg斧头劈柴动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：svg斧头劈柴动画效果代码

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

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

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

  
  
<style>
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #009999;
}

svg {
  height: auto;
}

@keyframes fiskar {
  0% {
    transform: matrix(0.38, 0.93, -0.93, 0.38, 133.3, 126.2);
    animation-timing-function: ease-out;
  }
  10.47% {
    transform: matrix(0.24, 0.97, -0.97, 0.24, 144.6, 119.8);
    animation-timing-function: ease-out;
  }
  19.77% {
    transform: matrix(0.6, 0.8, -0.8, 0.6, 117.1, 139.8);
    animation-timing-function: linear;
  }
  20.93% {
    transform: matrix(0.38, 0.93, -0.93, 0.38, 133.3, 126.2);
    animation-timing-function: ease-out;
  }
  31.4% {
    transform: matrix(0.24, 0.97, -0.97, 0.24, 144.6, 119.8);
    animation-timing-function: ease-out;
  }
  40.7% {
    transform: matrix(0.7, 0.72, -0.72, 0.7, 109.65, 150.3);
    animation-timing-function: linear;
  }
  44.19% {
    transform: matrix(0.7, 0.72, -0.72, 0.7, 109.65, 150.3);
    animation-timing-function: ease-in-out;
  }
  79.07% {
    transform: matrix(0.21, -0.98, 0.98, 0.21, 104.9, 97.15);
    animation-timing-function: ease-in;
  }
  82.56% {
    transform: matrix(0.42, -0.91, 0.91, 0.42, 119.6, 118.1);
    animation-timing-function: linear;
  }
  88.37% {
    transform: matrix(0.38, 0.93, -0.93, 0.38, 133.3, 126.2);
    animation-timing-function: ease-out;
  }
  94.19% {
    transform: matrix(0.43, 0.9, -0.9, 0.43, 128.4, 129.55);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: matrix(0.38, 0.93, -0.93, 0.38, 133.3, 126.2);
    animation-timing-function: linear;
  }
}
@keyframes logFront {
  0% {
    transform: matrix(1, 0, 0, 1, 187.5, 200.65);
    animation-timing-function: linear;
  }
  88.37% {
    transform: matrix(1, 0, 0, 1, 187.5, 200.65);
    animation-timing-function: ease-out;
  }
  94.19% {
    transform: matrix(1, 0.09, -0.09, 1, 187.5, 203.25);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: matrix(1, 0, 0, 1, 187.5, 200.65);
    animation-timing-function: linear;
  }
}
@keyframes logBack {
  0% {
    transform: matrix(1, 0, 0, 1, 168.75, 193.25);
    animation-timing-function: linear;
  }
  88.37% {
    transform: matrix(1, 0, 0, 1, 168.4, 193.9);
    animation-timing-function: ease-out;
  }
  94.19% {
    transform: matrix(1, -0.08, 0.08, 1, 167.6, 198.05);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: matrix(1, 0, 0, 1, 168.4, 193.9);
    animation-timing-function: linear;
  }
}
#logFront {
  animation: logFront 2.46s infinite;
  animation-delay: 0s;
}

#logBack {
  animation: logBack 2.46s infinite;
  animation-delay: 0s;
}

#fiskar {
  animation: fiskar 2.46s infinite;
  animation-delay: 0s;
}
</style>


  
</head>

<body translate="no">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300">
        <defs>
                <linearGradient id="Gradient_1" gradientUnits="userSpaceOnUse" x1="151.05" y1="-130.97500000000002" x2="194.45" y2="-55.825" spreadMethod="pad">
                        <stop offset="0%" stop-color="#000000" />

                        <stop offset="100%" stop-color="#FFFFFF" />
                </linearGradient>

                <linearGradient id="Gradient_2" gradientUnits="userSpaceOnUse" x1="37.575" y1="-8.825" x2="19.724999999999998" y2="-34.275000000000006" spreadMethod="pad">
                        <stop offset="0%" stop-color="#000000" />

                        <stop offset="100%" stop-color="#666666" />

                        <stop offset="100%" stop-color="#FFFFFF" />
                </linearGradient>

                <g id="logBack_0_Layer0_0_FILL">
                        <path fill="#8F8775" stroke="none" d="
M 86.3 -17.45
L 67.95 -14.1 48.8 2.85 44.25 6 60.7 5.7 74.9 -5.6 86.3 -17.45 Z" />

                        <path fill="#504736" stroke="none" d="
M 88.25 -4.05
L 82.7 -3.5 75 7.5 62.2 7.5 48.75 14.65 34 16.35 24 19.9 25.7 25.1
Q 50.21484375 18.716796875 72.2 12
L 85.1 7.3
Q 87.15 1.35 88.25 -4.05 Z" />

                        <path fill="#5B503D" stroke="none" d="
M 82.7 -3.5
L 88.25 -4.05
Q 89.85 -11.65 89.6 -18.05
L 86.3 -17.45 74.9 -5.6 60.7 5.7 44.25 6 39.6 9.2 25.95 12.05 22.2 14.4 24 19.9 34 16.35 48.75 14.65 62.2 7.5 75 7.5 82.7 -3.5 Z" />

                        <path fill="#D6C3B4" stroke="none" d="
M 51.95 -20.5
L 59.6 -20.6 67.3 -20.7 85.1 -34.05
Q 84.1 -35.65 82.95 -37.1
L 62.65 -32.1 51.95 -20.5
M 31.7 -16.55
L 31.65 -17.6 44.2 -27.5 52.55 -31.1 47.7 -33.2 25.4 -24.4 21.45 -16.2 31.7 -16.55 Z" />

                        <path fill="#806E5F" stroke="none" d="
M 33.2 -3.55
L 25.75 -1.55 22.8 1.3
Q 22.6 1.95 22.35 2.6
L 22.35 2.65
Q 21.45 5.05 20.05 7.7
L 22.2 14.4 25.95 12.05 39.6 9.2 44.25 6 48.8 2.85 67.95 -14.1 86.3 -17.45 89.6 -18.05
Q 89.25 -27.25 85.1 -34.05
L 67.3 -20.7 59.6 -20.6 45.75 -6.2 33.2 -3.55 Z" />

                        <path fill="#CBB599" stroke="none" d="
M 23.15 -9.1
Q 23.2 -8.9 23.3 -8.65 24.65 -4.45 22.8 1.3
L 25.75 -1.55 33.2 -3.55 45.75 -6.2 59.6 -20.6 51.95 -20.5 48.8 -17.15 35 -9.3 23.15 -9.1 Z" />

                        <path fill="#E8D1AD" stroke="none" d="
M 31.65 -17.6
L 31.7 -16.55 21.45 -16.2 19.4 -16.15
Q 19.9 -15.3 20.3 -14.55 21.2 -12..........完整代码请登录后点击上方下载按钮下载查看