回答
我已經做了一個演示,它使用漸變,箱形陰影和關鍵幀動畫。代碼如下,你可以在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%;}
}
太酷了@Ana。謝謝。我會和它一起工作,並嘗試使用JavaScript來調整它,以在小過濾器上實現效果。我希望能夠使用鼠標控件擦除文本。 –
+1 - fx的不錯組合。 –
您可以使用canvas
來達到此效果。請參閱:
上的文字只在這裏可以看到一個模擬退格作用:http://demos.frnzzz.com/typing/
自由形式的頁面上的任何DOM元素的消除是困難,因爲你不能刪除一個元素的一部分,也不容易將顏色應用到一個元素的一部分。
您可以通過將元素移動到可見區域之外或剪切它來模擬部分移除元素。這可能一次只能用於一個軸。
最後,有可能是CSS transforms和/或CSS transitions一些組合,讓你所尋求的效果,但瀏覽器的支持是目前canvas
比變換/轉換更好,所以你可能會得到更好的利用canvas
服務。
謝謝@TimMedora。在我提出這個問題之前,我確實看到了您提供的兩個鏈接。我想要實現將鼠標指針拖過黑板並擦除其上的效果。可能需要在閃存中執行此操作。但我正在探索是否有一些新的CSS提供了這樣的概念,或者看看是否有人通過jQuery做了任何真正的創意。 –
@如果你不需要支持每個瀏覽器(比使用Flash更清潔,但IE 7/8/9不工作),Ana的解決方案將是我的首選。你也許可以編寫一個很好的解決方案,並且只在不支持轉換的瀏覽器中進行剪輯/隱藏。 –
- 1. 使用畫布的橡皮擦效果
- 2. UIBezierPath的橡皮擦
- 3. 使用着色器的平面中的橡皮擦效果
- 4. 橡皮擦iOS中
- 5. 橡皮擦/橡膠爲Android帆布
- 6. HTML5帆布橡皮擦
- 7. 橡皮擦在OpenGL ES iphone
- 8. HTML5帆布:globalCompositeOperation(橡皮擦)
- 9. 素描應用的橡皮擦
- 10. 橡皮擦不適用於iOS繪圖
- 11. 橡皮擦工具爲iOS應用
- 12. 如何禁用橡皮筋效果iOS?
- 13. jQTouch中的iscroll橡皮筋效果
- 14. 橡皮擦等效繪圖應用程序,C#,Silverlight,WP7
- 15. osx橡皮擦滑動背景
- 16. Java:類型橡皮擦實施
- 17. 我該如何添加橡皮擦cocos2d?
- 18. Photoshop腳本 - 魔術橡皮擦工具
- 19. 橡皮擦在Android設備上查看
- 20. 橡皮擦PorterDuff.Mode.CLEAR不是在畫布
- 21. iPhone石英繪圖橡皮擦
- 22. 如何實現橡皮筋效果?
- 23. QgraphicsView橡皮筋效果縮放行爲
- 24. CSS字體樣式 - 橡皮圖章效果
- 25. 爲什麼在使用橡皮擦時會出現黑線?
- 26. 如何在android中使用手指橡皮擦?
- 27. 如何在日冕中使用橡皮擦?
- 28. 在html中使用.Zap橡皮擦文件
- 29. 使用橡皮擦時保留背景圖像
- 30. 在覈心動畫或核心圖形上創建簡單的橡皮擦效果有多困難?
有趣的想法,但你有什麼這麼遠嗎? – Joseph
你的意思是'用同樣的方式黑板擦會擦除書寫'? –
爲了好玩,你可以(閱讀效率低下)動畫背景圖像漸變!快速演示:http://jsfiddle.net/MncSg/ – WSkid