虚线 实现_【前端冷知识】CSS如何实现虚线框动画

我们知道，CSS支持将元素的border属性设为虚线，例如：

<h1>君喻学堂h1>

h1 {

  border: dashed 1px;

}

但是，CSS的虚线样式是固定的，如果我们希望改变虚线的间隔，或者显示虚线滚动的动画效果，那么在CSS属性中是没办法做到的。

一个办法是使用SVG来模拟外框：

<div>

  <h1>君喻学堂

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">

    <rect x="2" y="2" width="200px" height="46px">rect>

  svg>

  h1>