js实现可视化拖拽编辑的盒式工厂运输传送带动画代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：js实现可视化拖拽编辑的盒式工厂运输传送带动画代码

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

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

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

  
<style>
*,
:before,
:after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

html,
body {
  overscroll-behavior: none;
  cursor: grab;
}

:active {
  cursor: grabbing;
}

body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  background-color: #797979;
  font-size: 14px;
  color: #fff;
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
  --control: #1b8aab;
}

.wrapper {
  position: absolute;
  width: 2000px;
  height: 2000px;
  pointer-events: none;
  background-color: #b4b3b3;
}

.wrapper * {
  pointer-events: none;
}

.wrapper.delete-mode {
  background-color: #938060;
}

.wrapper.delete-mode .el:hover,
.wrapper.delete-mode .el-group {
  animation: delete-mode infinite 2s;
}

@keyframes delete-mode {
  0%,
  100% {
    background-color: #471414;
  }
  50% {
    background-color: #c35858;
  }
}

.wrapper * {
  pointer-events: none;
}

.dev {
  transition: opacity 0.3s;
  opacity: 0;
  pointer-events: none;
}

.dev-mode .el,
.dev-mode .pneumatic-tube,
.dev-mode .dev {
  opacity: 1;
  pointer-events: all;
}

.pneumatic-tube {
  position: absolute;
  --m: 2;
  --w: 24px;
  --h: 24px;
  --frame-no: 1;
  --offset: 0px;
  margin-top: calc(var(--h) * -1);
  margin-left: calc(var(--w) * -1);
  z-index: 10;
}

[variant='straight'] .tube {
  --bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAPElEQVR4AeyVsQkAAAjD1P9/1hM6ZZFkFoS00CmYBw8WZhrmQQZwS0tF0bCKVBQNxANblBXBe7MOTszgAAAA//+VdSGoAAAABklEQVQDANbXwDGnv3nqAAAAAElFTkSuQmCC);
}

[variant='elbow'] .tube {
  --bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAeklEQVR4AeyUSwrAIAxEW+9/Z2UWAwHjJzK60UBoKfa9Zqimb3NdKMjBmorIMv9gdQUEW2b0n2gKACc4CrXrXQHhduHqvStYhXnvVQLl10NYCfBQ2WcF6niQxNkJYFT3m2CY6IuoGRH2FHpLRADzqJcLCOdocgHBvBYAAAD//xGdci8AAAAGSURBVAMAj7dkKYBqE1kAAAAASUVORK5CYII=);
}

[variant='entrance'] .tube {
  --bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAaElEQVR4AeyTMQoAMAgD2/7/zy0BM1jazdsURFxyGHUNOBqQDN6PKLVoPqIUkMaJpgFhxL8gFumYjEQAEjcEAxiCAgRBAfo7DCBxbAKLYwAJOzGLGmAHUtX33lm6A13PnaWANE40OOAAAAD//2ff7uMAAAAGSURBVAMAMuw0MaZMgU0AAAAASUVORK5CYII=);
}

.dev-mode [variant='entrance'] .tube {
  --bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAfElEQVR4AdyTsQ3AIAwEwTtklyhNhkiRcaKMkyJD0CB2YQjQF24Qpb/Alq71yfZbArkcCLY/NSvapOQ+9teKOCkHNyCnNKy5IoRJN0ObQCU0ASaAhCqAhCrA39EEaE6bQJvTBGis0FbkSPDl8liBxxqRep3RCqRnZP0jdwAAAP//O9DFpgAAAAZJREFUAwCHLMwxwSrCEAAAAABJRU5ErkJggg==);
}

.conveyor-belt {
  position: absolute;
  --m: 4;
  --h: 12px;
  --move-direction: -1;
  --frame-no: 5;
}

.belt-wrapper {
  display: flex;
}

.btn-wrapper {
  position: absolute;
  width: 100px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform: translate(36px, 36px);
}

.btn-wrapper .btn {
  position: relative;
  margin: 0;
  z-index: 999;
}

.pix {
  overflow: hidden;
  position: relative;
  --width: calc(var(--m) * var(--w));
  --height: calc(var(--m) * var(--h));
  width: var(--width);
  height: var(--height);
}

.pix::after {
  content: '';
  image-rendering: pixelated;
  position: absolute;
  width: calc(var(--width) * var(--frame-no));
  height: var(--height);
  background-image: var(--bg-image);
  background-size: cover;
  animation: frame-animation 0.5s infinite steps(calc(var(--frame-no) - 1));
  animation-play-state: paused;
}

.conveyor-belt .pix {
  width: calc(var(--width) - (var(--m) * 2px));
  height: calc(var(--height) - (var(--m) * 2px));
}

.conveyor-belt .pix::after {
  top: calc(-1px * var(--m));
  left: calc(-1px * var(--m));
}

.animate .pix::after {
  animation-play-state: running;
}

.belt-module {
  --w: 7px;
  --bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAMCAYAAADoIwS6AAAAjklEQVR4AezUywmEQBBF0ZnJwvyDM4yRI1wpBPcuWri8TykUrfj7vOg.........完整代码请登录后点击上方下载按钮下载查看