CSS で点線の境界線のスクロール効果を実装するサンプルコード

<div class="box">
  <p>テストテスト</p>
</div>

。箱 {
  幅: 100ピクセル;
  高さ: 100px;
  位置: 相対的;
  背景: url(upload/2022/web/selection.gif);
  ｐ {
    位置: 絶対;
    左: 0;
    上: 0;
    右: 0;
    下部: 0;
    マージン: 自動;
    高さ: calc(100% - 2px);
    幅: calc(100% - 2px);
    背景色: #fff;
  }
}

。箱 {
  幅: 100ピクセル;
  高さ: 100px;
  背景: 繰り返し線形グラデーション(
    135度、
    透明、
    透明4ピクセル、
    #000 4ピクセル、
    #000 8ピクセル
  );
  overflow: hidden; // 垂直方向のマージンが崩れる問題を解決するために新しい BFC を作成します animation: move 1s infinite linear;
  ｐ {
    高さ: calc(100% - 2px);
    マージン: 1px;
    背景色: #fff;
  }
}
@keyframes 移動 {
  から {
    背景位置: -1px;
  }
  に {
    背景位置: -12px;
  }
}

。箱 {
  幅: 100ピクセル;
  高さ: 100px;
  背景: linear-gradient(0deg, transparent 6px, #e60a0a 6px) repeat-y,
    線形グラデーション(0度、透明度50%、#0f0ae8 0) 繰り返しy、
    線形グラデーション(90度、透明度50%、#09f32f 0) 繰り返しx、
    線形グラデーション(90度、透明度50%、#fad648 0) repeat-x;
  背景サイズ: 1px 12px、1px 12px、12px 1px、12px 1px;
  背景位置: 0 0, 100% 0, 0 0, 0 100%;
  アニメーション: move2 1s 無限線形;
  ｐ {
    マージン: 1px;
  }
}
@keyframes 移動2 {
  から {
  }
  に {
    背景の位置: 0 -12px、100% 12px、12px 0、-12px 100%;
  }
}

。箱 {
  幅: 100ピクセル;
  高さ: 100px;
  背景: 線形グラデーション(0度, #f0e, #fe0);
  -webkit-mask: linear-gradient(0deg, transparent 6px, #e60a0a 6px) repeat-y,
    線形グラデーション(0度、透明度50%、#0f0ae8 0) 繰り返しy、
    線形グラデーション(90度、透明度50%、#09f32f 0) 繰り返しx、
    線形グラデーション(90度、透明度50%、#fad648 0) 繰り返しx、
    linear-gradient(0deg, #fff, #fff) no-repeat; // ここでは任意の不透明色を使用できます -webkit-mask-size: 1px 12px, 1px 12px, 12px 1px, 12px 1px, 98px 98px;
  -webkit-mask-position: 0 0, 100% 0, 0 0, 0 100%, 1px 1px;
  オーバーフロー: 非表示;
  アニメーション: move3 1s 無限線形;
  ｐ {
    高さ: calc(100% - 2px);
    マージン: 1px;
    背景色: #fff;
  }
}
@keyframes 移動3 {
  から {
  }
  に {
    -webkit-mask-position: 0 -12px、100% 12px、12px 0、-12px 100%、1px 1px;
  }
}