Блог

Я создаю модуль перетаскивания — и мне нужно, чтобы он был таким, чтобы при выполнении процесса перетаскивания пунктирная линия вокруг внешней стороны перемещалась внутрь, а поле приобретало определенный цвет. Я не хочу, чтобы внешний вид пунктирной линии менялся. Возможно, анимация пунктирной линии перемещается по краю рамки

.

• на данный момент это гарантирует, что содержимое не прыгает — чтобы оно было абсолютно позиционировано, чтобы оно было отключено от морфинга границы?
• как в 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;
  }

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

}
 

Вы можете попробовать, как показано ниже:

 .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> 

Чтобы сделать переход границы более плавным, вы можете добавить следующий CSS-код в свой :

 {
    transition: 0.5s padding ease-in-out;
}
 

Вы можете добавить другие параметры в транзакцию в соответствии с вашими требованиями.