【问题标题】：CSS/HTML: Border builds it self?CSS/HTML：边框自己构建？
【发布时间】：2017-09-04 00:02:31
【问题描述】：

所以我想知道这怎么可能？我真的很想在我的网站上有类似的东西。这有多难，如果有谁能帮助我？

这是我想要完成的一个示例： Click Here

【问题讨论】：

您能详细说明一下吗？您的链接与边框没有任何关系；它显示有人单击按钮并移动鼠标光标。
如果你看到图片，在这个人点击“播放”后，你可以看到文字“play zen games”，并且它周围是一个自行构建的边框。
哦，那不是很清楚。好吧，您可以在 div 中使用具有溢出：隐藏和过渡宽度的背景图像来做一些事情。
过渡宽度？
how to animate drawing lines on canvas的可能重复

标签： html css

【解决方案1】：

那么，您想知道您是否可以在纯 HTML 和 CSS 中实现这一点？

是的，你可以。

要模拟边框绘制动画，您需要做的就是使用一些svg 并通过动画 SVG 描边（边框）来执行技巧。

最简单形式的技巧包括：

svg 元素 - 它将包含我们的矢量图形，重要的是包含 viewbox 属性以进行适当的缩放，
path 或任何其他可以有笔划的 SVG 元素，
stroke-dasharray 和 stroke-dashoffset path 的 CSS 属性。我们从大事开始，例如stroke-dashoffset: 2000px，
animation CSS 属性和 @keyframes 在定义的时间后将 stroke-dashoffset 带回 0。

了解笔画偏移

在 SVG 中，您可以创建虚线边框——因此它由交替的部分组成：间隙和笔划。 stroke-dasharray 定义了这种行为。它需要至少 2 个数字。第一个是破折号的宽度，第二个是间隙的宽度。

此外，stroke-dashoffset 只是控制这个 dash–gap 对的偏移量。换句话说，它是一个定义第一个破折号从哪里开始的数字。

我准备了一个示例来显示这两个属性之间的关系。你可以通过点击Run code sn-p来玩它。 ;-)

svg {
  transition: all 1s;
}

#dasharray-1:checked ~ #preview svg {
  stroke-dasharray: 10px 20px;
}
#dasharray-2:checked ~ #preview svg {
  stroke-dasharray: 20px 10px;
}
#dasharray-3:checked ~ #preview svg {
  /*/ dash 10px / gap 20px / dash 30px / gap 40px... /*/
  stroke-dasharray: 10px 20px 30px 40px;
}
#dasharray-4:checked ~ #preview svg {
  stroke-dasharray: 2000px 2000px;
}

#dashoffset-1:checked ~ #preview svg {
  stroke-dashoffset: 100px;
}
#dashoffset-2:checked ~ #preview svg {
  stroke-dashoffset: 1990px;
}
#dashoffset-3:checked ~ #preview svg {
  stroke-dashoffset: 2000px;
}

h1,
h2{
  margin-bottom: 0;
  margin-top: .5em;
}

#preview {
  position: absolute;
  top: 0;
  right: 1em;
  transform-origin: 100% 0%;
}

<h1>SVG test</h1>
<h2><code>stroke-dasharray</code></h2>
<input type="radio" name="dasharray" id="dasharray-0" checked>
<label for="dasharray-0"><code>default</code></label>
<input type="radio" name="dasharray" id="dasharray-1">
<label for="dasharray-1"><code>10px 20px</code></label>
<input type="radio" name="dasharray" id="dasharray-2">
<label for="dasharray-2"><code>20px 10px</code></label>
<input type="radio" name="dasharray" id="dasharray-3">
<label for="dasharray-3"><code>10px 20px 30px 40px</code></label>
<input type="radio" name="dasharray" id="dasharray-4">
<label for="dasharray-4"><code>2000px 2000px</code></label>

<h2><code>stroke-dashoffset</code></h2>
<input type="radio" name="dashoffset" id="dashoffset-0" checked>
<label for="dashoffset-0"><code>default</code></label>
<input type="radio" name="dashoffset" id="dashoffset-1">
<label for="dashoffset-1"><code>100px</code></label>
<input type="radio" name="dashoffset" id="dashoffset-2">
<label for="dashoffset-2"><code>1990px</code></label>
<input type="radio" name="dashoffset" id="dashoffset-3">
<label for="dashoffset-3"><code>2000px</code></label>

<div id="preview">
  <h2>Preview</h2>
  <svg xmlns="http://www.w3.org/2000/svg" width="100" height="150">
    <rect width="100" height="150" fill="none" stroke="#222" stroke-width="10" color="#000"/>
  </svg>
</div>

花哨的例子

既然您（希望）了解了笔画的工作原理，那么您已经准备好施展魔法了！要为绘图效果设置动画，首先我们定义一对破折号和间隙。 Dash 的宽度为 2000 像素，间隙也是如此——stroke-dashoffset: 2000px 2000px。然后我们移动它们，因此用户只能看到一个间隙 - stroke-dashoffset: 2000px。最后，我们启动了一个动画，导致偏移回到0 — stroke-dashoffset: 0。

/*/ Animate lines /*/
.ornament .line path {
	fill: none;
	stroke: #ecf0f1;
	stroke-width: .2px;
	stroke-dasharray: 2000px 2000px;
	stroke-dashoffset: 2000px;
	animation: drawStroke 5s ease-in-out forwards 0s;
}

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

/*/ Arrange our 4 exact SVGs /*/
.ornament {
	width: 80%;
	margin: 0 auto;
	clear: both;
	overflow: hidden;
}
.ornament.bottom {
	transform: scaleY(-1);
}
.ornament .line {
	width: 50%;
	float: left;
}
.ornament .line.left {
	transform: scaleX(-1);
}

/*/ Add gradient /*/
.ornament {
	position: relative;
}
.ornament:before,
.ornament:after {
	content: '';
	position: absolute;
	top: 0;
	background: red;
	width: 40%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
}
.ornament:before {
	left: 0;
	background: linear-gradient(to right, #111 0%, transparent 100%); 
}
.ornament:after {
	right: 0;
	background: linear-gradient(to left, #111 0%, transparent 100%); 
}

/*/ Beauty /*/
body {
	background: #111;
	color: #fff;
}
header {
	text-align: center;
	color: lime;
	font: 2em Impact, sans-serif;
	text-transform: uppercase;
}
header .title {
	margin: 0;
}

<section id="games">
  <header>
    <div class="ornament top">
      <svg class="line left" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 186 26">
        <path d="M0 1.4h11L18 12 7.3 9.4l6.4-2L9.3 3 2.6 4.6l6 1.6L3 1l4 14.4L13 5 2.8 11l24.4 6.4H130l14 8h42"/>
      </svg>
      <svg class="line right" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 186 26">
        <path d="M0 1.4h11L18 12 7.3 9.4l6.4-2L9.3 3 2.6 4.6l6 1.6L3 1l4 14.4L13 5 2.8 11l24.4 6.4H130l14 8h42"/>
      </svg>
    </div>
    <h2 class="title">
      Play now
    </h2>
    <div class="ornament bottom">
      <svg class="line left" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 186 26">
        <path d="M0 1.4h11L18 12 7.3 9.4l6.4-2L9.3 3 2.6 4.6l6 1.6L3 1l4 14.4L13 5 2.8 11l24.4 6.4H130l14 8h42"/>
      </svg>
      <svg class="line right" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 186 26">
        <path d="M0 1.4h11L18 12 7.3 9.4l6.4-2L9.3 3 2.6 4.6l6 1.6L3 1l4 14.4L13 5 2.8 11l24.4 6.4H130l14 8h42"/>
      </svg>
    </div>
  </header>
</section>

【讨论】：