动画偏移边框 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;
  padding:40px;
  background:
   linear-gradient(#000,#000) top right content-box,  
   linear-gradient(#000,#000) top right content-box,
   linear-gradient(#000,#000) bottom left content-box,
   linear-gradient(#000,#000) bottom left content-box,
   url(https://placehold.it/1000x1000) center center;
  background-size:0 3px,3px 0,0 3px,3px 0,auto;
  background-repeat:no-repeat;
  transition:2s;
  box-sizing:border-box;
}
.container:hover {
  background-size:
   100% 3px,
   3px 100%,
   100% 3px,
   3px 100%,
   auto; /* This is for image */
}

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

然后只需调整位置即可控制动画：

body{
  margin:0;
}

.container {
  height: 100vh;
  padding:40px;
  background:
   linear-gradient(#000,#000) top left content-box,  
   linear-gradient(#000,#000) top right content-box,
   linear-gradient(#000,#000) bottom right content-box,
   linear-gradient(#000,#000) bottom left content-box,
   url(https://placehold.it/1000x1000) center center;
  background-size:0 3px,3px 0,0 3px,3px 0,auto;
  background-repeat:no-repeat;
  transition:2s;
  box-sizing:border-box;
}
.container:hover {
  background-size:
   100% 3px,
   3px 100%,
   100% 3px,
   3px 100%,
   auto; /* This is for image */
}

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

另一个：

body {
  margin:0
}

.container {
  height: 100vh;
  padding:40px;
  background:
   linear-gradient(#000,#000) top content-box,  
   linear-gradient(#000,#000) right content-box,
   linear-gradient(#000,#000) bottom content-box,
   linear-gradient(#000,#000) left content-box,
   url(https://placehold.it/1000x1000) center center;
  background-size:0 3px,3px 0,0 3px,3px 0,auto;
  background-repeat:no-repeat;
  transition:2s;
  box-sizing:border-box;
}
.container:hover {
  background-size:
   100% 3px,
   3px 100%,
   100% 3px,
   3px 100%,
   auto; /* This is for image */
}

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

动画偏移边框 css？ javascript？

Animated offset border css? javascript?

javascript

css

animation

border