动画偏移边框css？ javascript？答案

【问题标题】：Animated offset border css? javascript?动画偏移边框css？ javascript？
【发布时间】：2018-06-20 22:28:50
【问题描述】：

您会在附件中找到一张图片，说明我想要完成的工作。我想设置我的背景，在此之上我想有一个与背景有一点偏移的边框。在某种程度上，我需要找到一种方法来为边框的每一侧设置动画。

我希望顶部边框从右侧动画化，底部边框从左侧动画化。左下一张，右上一张。

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

我所做的是：

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

边框是在 CSS 中创建的：

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

我意识到这是行不通的，因为我需要将每个边框部分作为单独的项目。

【问题讨论】：

你有什么代码可以让我们看看你已经做了什么吗？
还有动画如何 - 让它闪烁，让它移动？请多花点时间让这个问题更好，因为它的当前格式，它将被关闭
我没有设法接近我所追求的。
然后向我们展示代码 - stackoverflow.com/help/how-to-ask
帖子已更新。

标签： javascript css animation border

【解决方案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;
}

&lt;div id="mainsection"&gt;&lt;/div&gt;

【讨论】：

【解决方案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 */
}

&lt;div class="container"&gt;&lt;/div&gt;

然后简单地调整位置来控制动画：

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 */
}

&lt;div class="container"&gt;&lt;/div&gt;

另一个：

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 */
}

&lt;div class="container"&gt;&lt;/div&gt;

【讨论】：