Widget:Sandbox

这里是Widget沙盒，管理员用户可以使用以下预先准备的框架进行编辑测试。

CSS样式表：

 */
#sif-canvas, #sif-origin, .sif-nine, sif-note {
  box-sizing: border-box;
}
#sif-canvas, .sif-nine, .sif-note {
  border:1px solid;
}
#sif-canvas {
  width:400px;
  height:200px;
}
#sif-origin, .sif-nine, .sif-note {
  border-radius: 50%;
}
#sif-origin {
  position: relative;
  width: 50px;
  height: 50px;
  margin: auto;
  border: 2px solid;
}
.sif-nine, .sif-note {
  position: absolute;
  inset: 0;
  z-index: -1;
}
#sif-canvas:hover .sif-note.pos1 {
  animation: sif1 3s linear;
}
#sif-canvas:hover .sif-note.pos2 {
  animation: sif2 3s linear;
}
#sif-canvas:hover .sif-note.pos3 {
  animation: sif3 3s linear;
}
#sif-canvas:hover .sif-note.pos4 {
  animation: sif4 3s linear;
}
#sif-canvas:hover .sif-note.pos5 {
  animation: sif5 3s linear;
}
#sif-canvas:hover .sif-note.pos6 {
  animation: sif6 3s linear;
}
#sif-canvas:hover .sif-note.pos7 {
  animation: sif7 3s linear;
}
#sif-canvas:hover .sif-note.pos8 {
  animation: sif8 3s linear;
}
#sif-canvas:hover .sif-note.pos9 {
  animation: sif9 3s linear;
}
@keyframe sif1 {
  from {
    transform: none;
  }
  to {
    transform: translate(-150px, 0);
  }
}
@keyframe sif2 {
  from {
    transform: none;
  }
  to {
    transform: translate(-138.582px, 57.403px);
  }
}
@keyframe sif3 {
  from {
    transform: none;
  }
  to {
    transform: translate(-106.066px, 106.066px);
  }
}
@keyframe sif4 {
  from {
    transform: none;
  }
  to {
    transform: translate(-57.403px, 138.582px);
  }
}
@keyframe sif5 {
  from {
    transform: none;
  }
  to {
    transform: translate(0, 150px);
  }
}
@keyframe sif6 {
  from {
    transform: none;
  }
  to {
    transform: translate(57.403px, 138.582px);
  }
}
@keyframe sif7 {
  from {
    transform: none;
  }
  to {
    transform: translate(106.066px, 106.066px);
  }
}
@keyframe sif8 {
  from {
    transform: none;
  }
  to {
    transform: translate(138.582px, 57.403px);
  }
}
@keyframe sif9 {
  from {
    transform: none;
  }
  to {
    transform: translate(150px, 0);
  }
}
/*