使用CSS或JavaScript的橡皮擦效果

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