环绕式 CSS 边框动画答案

【问题标题】：Wrap-around CSS border animation环绕式 CSS 边框动画
【发布时间】：2019-08-24 04:08:45
【问题描述】：

我正在尝试使用纯 CSS 获得类似环绕的边框动画。

我现在的做法是改变:before 和:after 伪元素的大小。一个用于顶部和右侧边框，一个用于底部和左侧。

但是，由于宽度和高度的不同，我得到了一个奇怪的效果，因为每一边都需要相同的时间，但由于宽度比高度大得多，看起来它走得更快。

如果事先不知道 div 的大小，你会如何修复它？

也欢迎使用 SCSS/vanilla CSS 获得相同动画的任何不同方法。

似乎我无法更改 SO 上 sn-p 的大小，但如果你想玩，这里有一个 codepen：https://codepen.io/lollobaldo2000/pen/KKPazNw?editors=1100

* {
  box-sizing: border-box;
}

body {
  background: black;
}

.square {
  background: black;
  display: block;
  width: 500px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -100px auto auto -250px;
}
.square:before, .square:after {
  content: '';
  width: 0%;
  height: 0%;
  position: absolute;
  border: 1px solid #FB0;
  animation-fill-mode: forwards;
}
.square:before {
  left: 0;
  top: 0;
  border-bottom: 0;
  border-left: 0;
  animation: btm 2s ease-in forwards;
}
.square:after {
  visibility: hidden;
  right: 0;
  bottom: 0;
  border-top: 0;
  border-right: 0;
  animation: btm 2s 2s ease-out forwards;
}

@keyframes btm {
  0% {
visibility: visible;
width: 0;
height: 0;
  }
  50% {
width: 100%;
height: 0;
  }
  100% {
width: 100%;
height: calc(100% - 1px);
visibility: visible;
  }
}

<div class="square">
</div>

【问题讨论】：

标签： html css css-animations

【解决方案1】：

考虑到一个用于定义边框的小型 SVG，您可以轻松地做到这一点，然后为 stroke-dashoffset 设置动画

.square {
  display:inline-block;
  margin:5px;
  width:200px;
  height:100px;
  position:relative;
  vertical-align:top;
}


svg {
 overflow:visible;
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
}

rect {
 fill:transparent;
 stroke:#FB0;
 stroke-dasharray: 1000;
 stroke-dashoffset: 1000;
 animation:change 5s linear forwards;
}

@keyframes change {
  to {
   stroke-dashoffset: 0;
  }
}

body {
  background: black;
}

<div class="square">
<svg  preserveAspectRatio="none"><rect x=0 y=0 width=100% height=100% /></svg>
</div>


<div class="square" style="width:100px;">
<svg  preserveAspectRatio="none"><rect x=0 y=0 width=100% height=100% /></svg>
</div>


<div class="square" style="height:250px;">
<svg  preserveAspectRatio="none"><rect x=0 y=0 width=100% height=100% /></svg>
</div>

【讨论】：

太好了。有什么办法可以将它添加为背景，以免在我的 HTML 中包含 <svg> 标记？
@Lorenzo 您可以将 SVG 添加为背景，但您将无法在背景上触发动画。您必须将其作为运行动画的元素
赞成，因为它为我指明了正确的方向。我做了一点挖掘，结果发现有多种方法可以将<style> 包含到 svg 中。看看我正在添加的答案

【解决方案2】：

正如@Temani 所说，SVG 是必经之路。您可以将包含动画的样式插入 svg 本身。我将其添加为内联 url()。请注意它会被某些字符转义：

body{background:black;}
.square{
width: 300px;
height:100px;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3cstyle%3e rect %7b fill: transparent; stroke: %23FF9800; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation:change 3s ease-in-out forwards; stroke-width: 5;%7d %40keyframes change %7b to %7b stroke-dashoffset: 0;%7d %7d %3c/style%3e%3crect width='100%25' height='100%25' /%3e%3c/svg%3e ");
}

<div class="square">
</div>

【讨论】：