CSS/HTML:边框自建？

Question

所以我想知道这怎么可能？我真的很想在我的网站上看到类似的东西。这样做有多难，如果是的话，有人能帮我吗？

下面是我要完成的任务的一个例子：单击此处

Answer 1

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

可以，停那儿吧。

要模拟边框绘制动画，您所需要做的就是使用一些svg，并执行一个技巧，动画一个SVG笔画(边框)。

最简单的技巧包括：

1. svg元素-它将包含我们的矢量图，包含viewbox属性对于适当的缩放是很重要的，
2. path或任何其他可以有笔画的SVG元素，
3. stroke-dasharray和stroke-dashoffset CSS属性用于我们的path。我们从一些重要的东西开始，比如stroke-dashoffset: 2000px，
4. 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>

​

花哨的例子

现在你(希望)了解了笔画是如何工作的，你已经准备好接受一些魔法了！要动画一个绘图效果，首先我们定义一对破折号和间隙.Dash的宽度为2000 of，对于gap - 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>

​