Eraser Effect Using CSS or JavaScript

css, javascript

Solution

I've made a little demo which uses a gradient, box-shadow and keyframe animation. The code is below and you can see it in action at http://dabblet.com/gist/2722829

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

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

Problem

Original source

Related problems

• "Erasing" in html5 canvas
• HTML5 Canvas eraser