使用CSS或JavaScript的橡皮擦效果

是否有人知道任何css或javascript会产生一种逐渐擦除网页上文本的效果，就像黑板擦擦除黑板上的文字一样

---

谢谢。

您可以使用

画布实现此效果。见：





此处可以看到仅对文本的模拟退格效果：

自由形式擦除页面上的任何DOM元素都是很困难的，因为您不能删除元素的一部分，也不容易只对元素的一部分应用颜色

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

最后，可能有一些和/或的组合可以提供您想要的效果，但是当前浏览器对
canvas
的支持要好于变换/转换，因此使用
canvas
可能会更好。下面是代码，您可以在

HTML:

有趣的想法，但到目前为止你得到了什么？你所说的
是什么意思，就像黑板擦擦除书写一样
？为了好玩，你可以（低效地）读取背景图像渐变动画！快速演示：谢谢@TimMedora。在我提问之前，我确实看到了您提供的两个链接。我想实现一种效果，你把鼠标指针拖过黑板，然后把黑板上的东西擦掉。可能需要在flash中执行此操作。但我一直在探索新的CSS是否提供了这样的概念，或者是否有人通过jQuery做了真正有创意的事情。@如果你不需要支持所有浏览器，Ana的解决方案将是我的首选（比使用Flash更干净，但IE 7/8/9不起作用）。你可能会写一个很好的解决方案，在不支持转换的浏览器中进行剪辑/隐藏。太酷了@Ana。谢谢我将使用它，并尝试使用javascript对其进行调整，以在MouseOver上实现效果。我希望能够使用鼠标控件擦除文本。链接现在已断开
<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>

.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%;}
}