Question

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

感谢。

Answer 1

我做了一个使用渐变，盒子阴影和关键帧动画的小演示。代码如下，您可以在http://dabblet.com/gist/2722829

中查看该代码

HTML：

<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>

CSS：

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

Answer 2

您可以使用canvas实现此效果。参见：

此处可以看到对文本的模拟退格效果：http://demos.frnzzz.com/typing/

页面上任何DOM元素的自由格式擦除都很困难，因为您无法删除元素的一部分，也不容易将颜色仅应用于元素的一部分。

您可以通过将元素移动到可见区域之外或剪切它来模拟元素的部分移除。这可能一次仅适用于一个轴。

最后，可能会有CSS transforms和/或CSS transitions的某种组合产生您正在寻求的效果，但目前浏览器支持比canvas更好，而不是转换/转换，所以使用canvas可能会更好。

使用CSS或JavaScript的橡皮擦效果

2 个答案: