javascript - 动画偏移边框 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>