动画偏移边框css？ JavaScript的？

Question

附上你会找到一张图片来解释我想要完成的事情。 我希望我的背景设置，因为我希望有一个偏离背景的边框。在某种程度上，我需要找到一种方法来为它自己的边界的每一面设置动画。

我希望顶部边框从右侧动画，从左侧动画。左边一个从顶部开始，右边一个从顶部开始。

这让我头疼不已。有人有什么想法吗？

我所做的是：

<div id="#mainsection"></div>

边框在CSS中创建：

#mainsection:after {
    content: '';
    position: absolute;
    top: 40px;
    right: 40px;
    bottom: 40px;
    left: 40px;
    border: 4px solid #96896C;
}

我所意识到的是，这不会起作用，因为我需要将每个边界部分作为单独的项目。

Answer 1

您也许可以使用线性渐变和几个::before和::after伪元素。这不会为您提供完全独立的动画，但水平和垂直边框可以单独设置动画。

body, html {
  height: 100%;
}

#mainsection {
  height: 100%;
  position: relative;
  background: url(https://placehold.it/1000x1000) center center;
}

#mainsection:after {
  content: '';
  position: absolute;
  top: 40px;
  right: 40px;
  bottom: 40px;
  left: 40px;
  background-image: linear-gradient(black, black), linear-gradient(transparent, transparent), linear-gradient(black, black);
  background-repeat: no-repeat;
  background-size: 2px 0%, calc(100% - 4px) 100%, 2px 0%;
  background-position: left bottom, 0 0, right top;
  transition: background-size 1.5s ease;
}

#mainsection:before {
  content: '';
  position: absolute;
  top: 40px;
  right: 40px;
  bottom: 40px;
  left: 40px;
  background-image: linear-gradient(black, black), linear-gradient(transparent, transparent), linear-gradient(black, black);
  background-repeat: no-repeat;
  background-size: 0% 2px, calc(100% - 4px) 100%, 0% 2px;
  background-position: left bottom, 0 0, right top;
  transition: background-size 2s ease .5s; /* .5s delay */
}

#mainsection:hover:after {
  background-size: 2px 100%, calc(100% - 4px) 100%, 2px 100%;
}

#mainsection:hover:before {
  background-size: 100% 2px, calc(100% - 4px) 100%, 100% 2px;
}

<div id="mainsection"></div>

Answer 2

@Turnip的类似解决方案，但只需在同一个div上使用多个渐变。您可以通过使用background-size和background-position的初始值和最终值来控制每个动画的动画：

body {
  margin:0;
}
.container {
  height: 100vh;
  background:
  linear-gradient(to right, #000,#000) 20px 20px/0 3px no-repeat,
  linear-gradient(to right, #000,#000) calc(100% - 20px) calc(100% - 20px)/0 3px no-repeat,  
  linear-gradient(to bottom, #000,#000) 20px calc(100% - 20px)/3px 0 no-repeat,
  linear-gradient(to bottom, #000,#000) calc(100% - 20px) 20px/3px 0 no-repeat,
  url(https://placehold.it/1000x1000) center center;
  transition:2s;
}
.container:hover {
  background-size:
  calc(100% - 40px) 3px,
  calc(100% - 40px) 3px,
  3px calc(100% - 40px),
  3px calc(100% - 40px),
  auto; /* This is for image */
}

<div class="container"></div>

另一种动画：

body{
  margin:0;
}

.container {
  height: 100vh;
  background:
  linear-gradient(to right, #000,#000) 20px 20px/0 3px no-repeat,
  linear-gradient(to right, #000,#000) calc(100% - 20px) calc(100% - 20px)/0 3px no-repeat,  
  linear-gradient(to bottom, #000,#000) 20px 20px/3px 0 no-repeat,
  linear-gradient(to bottom, #000,#000) calc(100% - 20px) calc(100% - 20px)/3px 0 no-repeat,
  url(https://placehold.it/1000x1000) center center;
  transition:2s;
}
.container:hover {
  background-size:
  calc(100% - 40px) 3px,
  calc(100% - 40px) 3px,
  3px calc(100% - 40px),
  3px calc(100% - 40px),
  auto;
}

<div class="container"></div>

还有另一个：

body {
  margin:0
}

.container {
  height: 100vh;
  background:
  linear-gradient(to right, #000,#000) calc(100% - 20px) 20px/0 3px no-repeat,
  linear-gradient(to right, #000,#000) calc(100% - 20px) calc(100% - 20px)/0 3px no-repeat,  
  linear-gradient(to bottom, #000,#000) 20px 20px/3px 0 no-repeat,
  linear-gradient(to bottom, #000,#000) calc(100% - 20px) calc(100% - 20px)/3px 0 no-repeat,
  url(https://placehold.it/1000x1000) center center;
  transition:2s;
}
.container:hover {
  background-position:
  20px 20px,
  20px calc(100% - 20px),
  20px calc(100% - 20px),
  calc(100% - 20px) 20px,
  center center;
  background-size:
  calc(100% - 40px) 3px,
  calc(100% - 40px) 3px,
  3px calc(100% - 40px),
  3px calc(100% - 40px),
  auto;
}

<div class="container"></div>