css - css3を使用して実行する破線を作成する

Question

最近私のプロジェクトで、リンクの画像に出くわしました。それは、音楽、芸術、歌手などの業界で才能のある人々をつなぐようなものです。CSS3アニメーション、トランジション、または変換を使用して破線を実行することは可能ですか...？それがその効果を生み出す方法であるならば。

Answer 1

それは可能ですが、異なるブラウザーで何が起こるかを考慮する必要があります。CSS アニメーションは、すべてのブラウザーでまだ (完全に) サポートされているわけではありません。また、CSS 変換は完全には統合されていないため、IE ではランダムな水平線が入った壊れたページが表示されます。

ただし、これを使用するには、すべての行を個別にアニメーション化する必要があります。http://css3.bradshawenterprises.com/のアニメーション化に関する情報については、この Web サイトをご覧ください。

16行の場合、これはひどいものです。しかし、以下のコードで実行できます。

.line {
 border-top: 1px solid red;
 height: 1px;
}

#line1 {
 position absolute;
 width: 200px;
 -moz-transform:rotate(45deg);
 -webkit-transform:rotate(45deg);
 transform:rotate(45deg);
 -webkit-animation:move_line1 1s infinite;
 -moz-animation:move_line1 1s infinite;
 animation:move_line1 1s infinite;
}

#line2 {
 ...
}

@keyframes move_line1 {
 0% {
  top: 300px;
  left: 300px;
 }
 100% {
  top: 280px; /* Based on the rotation you can calculate the new x and y with sine and cosine */
  left: 280px;
 }
}

@keyframes move_line2 {
 ...
}

基本的に、htmlに次を追加します

<div id="line1" class="line> </div>
<div id="line2" class="line> </div>
...

Answer 2

border: 1px dashed red;

次に、他の方法を使用して正しく配置します