使用CSS或JavaScript的橡皮擦效果

是否有人知道任何CSS或JavaScript，創建一個效果，逐漸刪除網頁上的文本，就像黑板橡皮擦會在黑板上寫字一樣？使用CSS或JavaScript的橡皮擦效果

謝謝。

來源

2012-05-18 H. Ferrence

有趣的想法，但你有什麼這麼遠嗎？ – Joseph

你的意思是'用同樣的方式黑板擦會擦除書寫'？ –

爲了好玩，你可以（閱讀效率低下）動畫背景圖像漸變！快速演示：http://jsfiddle.net/MncSg/ – WSkid

我已經做了一個演示，它使用漸變，箱形陰影和關鍵幀動畫。代碼如下，你可以在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%;} 
}

來源

2012-05-18 11:08:33 Ana

太酷了@Ana。謝謝。我會和它一起工作，並嘗試使用JavaScript來調整它，以在小過濾器上實現效果。我希望能夠使用鼠標控件擦除文本。 –

+1 - fx的不錯組合。 –

您可以使用canvas來達到此效果。請參閱：

上的文字只在這裏可以看到一個模擬退格作用：http://demos.frnzzz.com/typing/

自由形式的頁面上的任何DOM元素的消除是困難，因爲你不能刪除一個元素的一部分，也不容易將顏色應用到一個元素的一部分。

您可以通過將元素移動到可見區域之外或剪切它來模擬部分移除元素。這可能一次只能用於一個軸。

最後，有可能是CSS transforms和/或CSS transitions一些組合，讓你所尋求的效果，但瀏覽器的支持是目前canvas比變換/轉換更好，所以你可能會得到更好的利用canvas服務。

來源

2012-05-18 02:13:28

謝謝@TimMedora。在我提出這個問題之前，我確實看到了您提供的兩個鏈接。我想要實現將鼠標指針拖過黑板並擦除其上的效果。可能需要在閃存中執行此操作。但我正在探索是否有一些新的CSS提供了這樣的概念，或者看看是否有人通過jQuery做了任何真正的創意。 –

@如果你不需要支持每個瀏覽器（比使用Flash更清潔，但IE 7/8/9不工作），Ana的解決方案將是我的首選。你也許可以編寫一個很好的解決方案，並且只在不支持轉換的瀏覽器中進行剪輯/隱藏。 –

使用CSS或JavaScript的橡皮擦效果

回答

相關問題