5

黒板消しゴムが黒板への書き込みを消去するのと同じように、Webページ上のテキストを徐々に消去する効果を生み出すcssまたはjavascriptを知っている人はいますか？

ありがとう。

4

2 に答える 2

11

グラデーション、ボックスシャドウ、キーフレームアニメーションを使用した小さなデモを作成しました。コードは以下のとおりです。http：//dabblet.com/gist/2722829で実際の動作を確認できます。

.parent {
  width: 400px;
  margin: 125px auto;
  padding: 8px;
  overflow: hidden;
  position: relative;
}
.eraser {
  left:-30%;
  top: 8px;
  height: 100%;
  width: 130%;
  border-radius: 135px/65px;
  box-shadow: 0 0 100px 50px rgba(255, 255, 255, .8);
  display: block;
  position: absolute;
  z-index: 2;
  background: radial-gradient(#fff, rgba(255, 255, 255, .95));
  animation: erase 4s ease-out;
}
@keyframes erase {
  from {left: -170%;}
  to {left: -30%;}
}
<div class="parent">
  <p>Biscuit danish icing halvah jelly beans jelly beans powder liquorice sugar plum. 
  Pie marzipan toffee donut chocolate dragée topping caramels. 
  Applicake wafer donut soufflé. Icing danish dessert icing carrot cake soufflé apple pie.
  </p>
  <div class="eraser"></div>
</div>

于 2012-05-18T11:08:33.700 に答える
3

この効果は、を使用して実現できますcanvas。見る：

テキストのみに対するシミュレートされたバックスペース効果は、ここで見ることができます：http: //demos.frnzzz.com/typing/

要素の一部を削除することも、要素の一部のみに色を適用することも簡単ではないため、ページ上のDOM要素を自由形式で消去することは困難です。

要素を表示領域の外側に移動するか、クリップすることで、要素の部分的な削除をシミュレートできます。これはおそらく一度に1つの軸でのみ機能します。

最後に、CSS変換やCSS遷移の組み合わせがあり、求めている効果が得られる場合がありますが、現在、ブラウザーのサポートはcanvas変換/遷移よりも優れているため、を使用する方が適切な場合がありますcanvas。

于 2012-05-18T02:13:28.570 に答える