web-dev-qa-db-ja.com

CSSを使用した点線枠の移動

実行時にドット付きスタイルの境界線プロパティをテキストブロックに適用するクラスがあります。 CSSを使用して、境界線をgif画像のように移動させるソリューションを見つけようとしています。

これを達成する方法はありますか？

cssborder
24
mehul9595

これは、アニメーションをどのように表示するかによって異なります。

一般に、border-styleによって提供されるスタイルは静的にレンダリングされます。それらをアニメーション化することは不可能です。

CSS3を使用しても、選択肢はかなり限られています。 border-imageでできる最善のことは、注意深く作成されたアニメーションGIF（これも、ブラウザがborder-imageをアニメーション画像に実装する方法に依存します）か、グラデーションアニメーションを使用することです。どちらを選択するかは、ブラウザーの互換性と、効果をどのように表示するかによって異なります。

それ以外の場合は、::beforeおよび::after疑似要素を試して、目的の効果を得ることができます。

ただし、警告として、アニメーションが関連するWCAGガイドライン、特に2.2.2と2.3に準拠していることを確認できない限り、特にアニメーションGIFの外観を使用しないことを強くお勧めします。特定の人々にとって危険であることに加えて、巧妙に作成されていないアニメーションは、ほとんどの人にとって役立つよりも不愉快なものになるかもしれません—これが、当時のアニメーションGIFをそれほど悪名高いものにした理由です。

言い換えれば、このテクニックは慎重に使用し、それを奪うのではなく、ユーザーエクスペリエンスに追加することがわかっている場合に限ってください。

13
BoltClock

CSS3ではありませんが、動作します： http://matthewjamestaylor.com/blog/animated-photoshop-selection-on-a-web-page

ストライプのCSS3グラデーションを利用し、背景の位置をアニメーション化することで、画像なしで作成できます（大まかなデモ： http://codepen.io/christopheschwyzer/pen/CEwBI ）が、私はそうしません。 Webkitでのみ機能するため、この方法をお勧めします。

28
Lea Verou

この記事 に基づいて 完全な例 を作成しました。楽しい！

.outer {
  position: absolute;
  
  left: 100px;
  top: 50px;
  width: 100px;
  height: 100px;
  
  background-image: url(http://matthewjamestaylor.com/blog/selection.gif);
  
  border: 1px solid;
}

.selected {
  border: 0px;
}

.inner {
  position:absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;

  background-color: #9CF;
}

.selected .inner {
  margin: 1px;
}
<div class="outer selected">
  <div class="inner" />
</div>
18
Andrey Talnikov

border-imageを使用した2つの例を次に示します。

利点：

  • 1つのdivのみ
  • 内部は本当に透明にすることができます
.selected {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50px;

  border: 1px solid transparent;
  box-sizing: border-box;

  border-image-outset: 0px;
  border-image-repeat: repeat;
  border-image-source: url("http://matthewjamestaylor.com/blog/selection-big.gif");
}

.v1 {
  left: 100px;

  border-image-slice: 6;
  border-image-width: 1px;
}

.v2 {
  left: 300px;

  border-image-slice: 3;
  border-image-width: 2px;
}
<p style="color: #aaa;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In aliquam metus hendrerit venenatis placerat. Morbi sem ex, egestas at egestas iaculis, imperdiet in mauris. Nulla facilisi. Aliquam eu porttitor libero, vel porta ipsum. Proin egestas consequat urna, et rhoncus arcu congue vitae. Maecenas at massa mollis, accumsan mauris in, faucibus ligula. Nulla sed lorem pharetra lacus dictum lobortis sit amet id tellus. Vestibulum porta auctor maximus. Fusce congue, orci et feugiat ultricies, turpis mi egestas est, nec vulputate nulla risus quis lorem. Sed vitae risus rhoncus, ultricies nunc non, mollis mauris.</p>

<div class="selected v1">
</div>

<div class="selected v2">
</div>
3
Vi.

現在の選択が切り取られて貼り付けられるのを待っていることを示すためにExcelが使用するアニメーション境界線をシミュレートしようとしているので、このような解決策も探しています。

不潔な服？いいえ、私が意図する使用の文脈ではありません。

このjQueryプラグインを見つけました。 http://there4development.com/projects/animatedborder/ 、元のポスターはそれを試してみたいかもしれません。

3
Steven Herod

点線の境界線をアニメーション化したいですか？

CSS 3 border images を調べると、IEをサポートしていなくても、境界線に（アニメーション）GIFを提供できます。

2
RoToRa

これはかなり柔軟なSCSSオプションです。

$antlength: 50px;
$antwidth: 10px;
$antcolor: black;

@keyframes marching-ants {
    0%   {background-position: 0 0, $antlength 100%, 0 $antlength, 100% 0;}
    100% {background-position: $antlength 0, 0 100%, 0 0, 100% $antlength;}
}

.ants {
    background-image: linear-gradient(90deg, $antcolor 50%, transparent 50%),
        linear-gradient(90deg, $antcolor 50%, transparent 50%),
        linear-gradient(0, $antcolor 50%, transparent 50%),
        linear-gradient(0, $antcolor 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: $antlength $antwidth, $antlength $antwidth, $antwidth $antlength, $antwidth $antlength;
    animation: marching-ants 400ms infinite linear;
}
2
Charlie

バックグラウンドでgif画像を使用できます。これはcssを介して行う唯一のソリューションです。そうでなければあなたのjavascript

1
Umair Jabbar