是的，你可以。

Question

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

以下是我要完成的一个示例： Click Here

Answer 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只控制这个破折号对的偏移量。换句话说，它是一个数字，用于定义第一个破折号的开始位置。

我准备了一个示例，显示了这两个属性之间的关系。您可以点击运行代码段来使用它。 ; - ）

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>

花哨的例子

既然你（希望）理解了笔画是如何工作的，那么你已经准备好了一些魔法！要为绘图效果设置动画，首先我们定义一对破折号。短划线的宽度为2000px，差距也相同 - 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>

CSS / HTML：Border自己构建它？

1 个答案:

是的，你可以。

了解笔划偏移量

花哨的例子