5

有没有人知道任何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 元素是很困难的，因为你不能删除元素的一部分，也不容易只对元素的一部分应用颜色。

您可以通过将元素移动到可见区域之外或对其进行剪裁来模拟元素的部分移除。这可能一次只能使用一个轴。

最后，可能有一些CSS 转换和/或CSS 转换的组合可以提供您正在寻找的效果，但目前浏览器支持canvas比转换/转换更好，因此使用canvas.

于 2012-05-18T02:13:28.570 回答