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

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

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