javascript - HTML5 动画创建虚线边框，在悬停时平滑地向内移动

Question

我正在制作一个拖放模块 - 并且需要拥有它，以便在拖动过程发生时 - 外部周围的虚线移入并且框变为特定颜色。我不希望虚线的外观发生变化。可以选择让虚线动画围绕框的边缘移动
.

现在它确保内容不会跳转 - 使其绝对定位，使其与边界变形断开连接？

css3 如何使边界平滑地移入/移出？

https://jsfiddle.net/L47xrsnt/4/
html

<div class="drag-drop">
  <div class="drag-drop-border">
    <div class="contents">
      xx
    </div>
  </div>
</div>

css

.drag-drop {

  .drag-drop-border {
    border: 2px dashed pink;
  }

  &:hover {
    padding: 15px;
    background: gold;
  }

}

Answer 1

您可以尝试如下:

.box {
  height: 100px;
  background: yellow;
  position: relative;
}

.box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 3px;
  border: 2px dashed pink;
  transition: 0.5s;
}

.box:hover::before {
  margin: 10px;
}

<div class="box">

</div>