svg+css实现甜甜圈输送机动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：svg+css实现甜甜圈输送机动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">

  
  
<style>
body, html {
  height: 100%;
  margin: 0;
}
svg {
  max-height: 100%;
}
#conveyer_line01 { 
  transform-origin: 144.905px 132.608px; 
  animation-name: conveyer-roll; 
  animation-duration: 3s; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
}
#conveyer_line02 { 
  transform-origin: 162.905px 140.608px; 
  animation-name: conveyer-roll; 
  animation-duration: 3s; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
  animation-delay: -0.25s; 
} 
#conveyer_line03 { 
  transform-origin: 162.905px 140.608px; 
  animation-name: conveyer-roll; 
  animation-duration: 3s; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
  animation-delay: -0.5s; 
} 
#conveyer_line04 { 
  transform-origin: 162.905px 140.608px; 
  animation-name: conveyer-roll; 
  animation-duration: 3s; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
  animation-delay: -0.75s; 
} 
#conveyer_line05 { 
  transform-origin: 162.905px 140.608px; 
  animation-name: conveyer-roll; 
  animation-duration: 3s; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
  animation-delay: -1s; 
} 
#conveyer_line06 { 
  transform-origin: 162.905px 140.608px; 
  animation-name: conveyer-roll; 
  animation-duration: 3s; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
  animation-delay: -1.25s; 
} 
#conveyer_line07 { 
  transform-origin: 162.905px 140.608px; 
  animation-name: conveyer-roll; 
  animation-duration: 3s; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
  animation-delay: -1.5s;
} 
#conveyer_line08 { 
  transform-origin: 162.905px 140.608px; 
  animation-name: conveyer-roll; 
  animation-duration: 3s; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
  animation-delay: -1.75s; 
} 
#conveyer_line09 { 
  transform-origin: 162.905px 140.608px; 
  animation-name: conveyer-roll; 
  animation-duration: 3s; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
  animation-delay: -2s;
} 
#conveyer_line10 { 
  transform-origin: 162.905px 140.608px; 
  animation-name: conveyer-roll; 
  animation-duration: 3s; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
  animation-delay: -2.25s; 
} 
#conveyer_line11 { 
  transform-origin: 162.905px 140.608px; 
  animation-name: conveyer-roll; 
  animation-duration: 3s; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
  animation-delay: -2.5s; 
} 
#conveyer_line12 { 
  transform-origin: 162.905px 140.608px; 
  animation-name: conveyer-roll; 
  animation-duration: 3s; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
  animation-delay: -2.75s;
} 
#arm_back { 
  transform-origin: 208.053px 132.805px; 
} 
#donut, #donut2 { 
  transform-origin: 208.053px 147.491px; 
  animation-name: donut-roll;
  animation-duration: 4s; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
} 
#donut2 { 
  animation-delay: -2s; 
} 
#arm_left { 
  transform-origin: 208.053px 109.099px; 
  animation-name: arm-left-rotate; 
  animation-duration: 2s;
  animation-timing-fucnction: linear;
  animation-iteration-count: infinite; 
} 
#arm_right { 
  transform-origin: 208.125px 109.099px; 
  animation-name: arm-right-rotate;
  animation-duration: 2s; 
  animation-timing-fucnction: linear; 
  animation-iteration-count: infinite;
} 
#back_string { 
  transform-origin: 208.053px 58.5px; 
} 
#center { 
  transform-origin: 208.053px 116.783px; 
} 
#donut_shadow, #donut_shadow2 { 
  transform-origin: 208.053px 158px; 
  opacity: 0;
  animation-name: shadow-fade; 
  animation-duration: 4s;
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
} 
#donut_shadow2 { 
  animation-delay: -2s; 
} 
#arm_back, #crane { 
  animation-name: crane-drop; 
  animation-duration: 2s;
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
  animation-delay: 0s;
} 
@keyframes conveyer-roll { 
  0% { transform: translate(0px, 0px); } 
  90% { transform: translate(498px, 287px); } 
  95% { transform: translate(520px, 311px); } 100% { transform: translate(513px, 330px); } 
} 
@keyframes crane-drop { 
  0% { transform: translate(0px, -200px); } 
  50% { transform: translate(0px, 0px); } 
  55% { transform: translate(0px, 0px); } 
  100% { transform: translate(0px, -200px); }
} 
@keyframes arm-left-rotate { 
  50% { transform: rotate(0deg); } 
  55% { transform: rotate(20deg) } 
  60% { transform: rotate(20deg) } 
  95% { transform: rotate(0deg); } 
} 
@keyframes arm-right-rotate { 
  50% { transform: rotate(0deg); } 55% { transform: rotate(-20deg) } 
  60% { transform: rotate(-20deg) } 95% { transform: rotate(0deg); } 
} 
@keyframes donut-roll {
  0% { transform: translate(0px, -200px); } 
  25% { transform: translate(0px, 0px); } 
  84% { transform: translate(435px, 248px) rotate(0deg); } 
  91% { transform: translate(480px, 330px) rotate(60deg); } 
  100% { transform: translate(495px, 480px) rotate(120deg); } 
} 
@keyframes shadow-fade { 
  0% { transform: translate(0px, 0px) scale(1.5); opacity: 0; } 
  25% { transform: translate(0px, 0px) scale(1); opacity: 0.75; } 
  84% { transform: translate(435px, 248px) rotate(0deg); opacity: 0.75; } 
  86% { opacity: 0; } 
  91% { transform: translate(480px, 330px) rotate(60deg); } 
  100% { transform: translate(495px, 480px) rotate(120deg); } 
}
</style>



</head>

<body  >
  <?xml version="1.0" encoding="UTF-8"?> <!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 800 600" style="enable-background:new 0 0 800 600;" xml:space="preserve"> <style type="text/css"> .st0{fill:#C2C4CD;} .st1{fill:#00BFAF;stroke:#0B1536;stroke-width:3;stroke-miterlimit:10;} .st2{fill:#0B1536;} .st3{fill:#FFFFFF;} .st4{fill:#0B1536;stroke:#0B1536;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st5{fill:#0B1536;stroke:#C2C4CD;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st6{fill:#0B1536;stroke:#A298D7;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st7{fill:#010611;} .st8{fill:#FEC6AD;} .st9{fill:#FDAA84;} .st10{fill:#FD5F6A;} .st11{fill:#FE949B;} .st12{fill:#FD8E5B;} .st13{fill:#FD2A38;} .st14{fill:none;stroke:#A298D7;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st15{fill:#0B1536;stroke:#A298D7;stroke-width:5;stroke-linejoin:round;stroke-miterlimit:10;} .st16{fill:#A298D7;} </style> <g id="conveyer"> <path id="conveter_shadow" class="st0" d="M563.5,533.12L79.29,253.61c-7.96-4.6-8.22-15.99-0.48-20.94l90.99-58.21 c3.69-2.36,8.42-2.62,12.24-0.45c0.04,0.02,0.07,0.04,0.11,0.06l504.64,291.3c8.17,4.72,8.17,16.51,0,21.23l-80.56,46.51 C593,540.75,576.72,540.75,563.5,533.12z"></path> <g id="conveyer_belt"> <path class="st1" d="M584.86,497.93L94.83,215.01c-9.01-5.2-16.31-19.15-16.31-31.16v0c0-12.01,7.3-17.53,16.31-12.33 l490.03,282.92c9.01,5.2,16.31,19.15,16.31,31.16v0C601.17,497.61,593.87,503.13,584.86,497.93z"></path> <path class="st2" d="M583.32,487.3L94.37,205.56c-5.05-2.92-9.15-10.74-9.15-17.48v0c0-6.74,4.1-9.83,9.15-6.92L583.32,462.9 c5.05,2.92,9.15,10.74,9.15,17.48v0C592.47,487.12,588.37,490.22,583.32,487.3z"></path> <path class="st3" d="M586.84,483.39c-0.16-0.03-0.5-0.11-1.03-0.42L96.87,201.23c-3.13-1.81-6.65-7.82-6.65-13.15 c0-1.79,0.42-2.71,0.62-3c0.17,0.03,0.51,0.12,1.03,0.42l488.95,281.74c3.13,1.81,6.65,7.82,6.65,13.15 C587.47,482.18,587.05,483.09,586.84,483.39z"></path> <path class="st1" d="M705.17,428.47L215.14,145.55c-9.01-5.2-16.31-19.15-16.31-31.16v0c0-12.01,7.3-17.53,16.31-12.33 l490.03,282.92c9.01,5.2,16.31,19.15,16.31,31.16v0C721.48,428.15,714.18,433.67,705.17,428.47z"></path> <g> <path class="st1" d="M81.57,172.96"></path> <path class="st1" d="M201.63,103.83"></path> <path class="st4" d="M205.58,100.67c2.69-1.05,5.99-0.67,9.56,1.39l490.03,282.92c9.01,5.2,16.31,19.15,16.31,31.16v0 c0,7.36-2.74,12.28-6.94,13.79l-119.31,69.02c3.62-1.9,5.93-6.6,5.93-13.35v0c0-12.01-7.3-25.96-16.31-31.16L94.83,171.53 c-3.71-2.14-7.14-2.47-9.88-1.26L205.58,100.67z"></path> </g> </g> <g id="conveyer_belt_1_"> <line id="conveyer_line01" class="st5" x1="81.57" y1="169.17" x2="208.24" y2="96.04"></line> <line id="conveyer_line02" class="st5" x1="81.57" y1="169.17" x2="208.24" y2="96.04"><.........完整代码请登录后点击上方下载按钮下载查看