在前端開發中，動畫效果的運用越來越重要，為網頁增加趣味性和活力。本文將介紹一種CSS實現擦除動畫效果的方法。

/* css代碼實現 */
.erase {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
.erase::before,
.erase::after {
content: '';
position: absolute;
top: 0;
height: 100%;
background: linear-gradient(to right, transparent 50%, #fff 50%);
background-position: -200px 0;
background-size: 200px 100%;
animation: erase 2s linear infinite;
}
.erase::before {
left: 0;
}
.erase::after {
right: 0;
transform: scaleX(-1);
}
@keyframes erase {
to {
background-position: 0 0;
}
}

在代碼中我們使用了::before和::after偽元素來實現動畫效果。在其中一個偽元素中設置了左側到中心的漸變色為透明，右側到中心的漸變色為白色，然后通過background-position讓之前的漸變色移動到左側，形成刮痕效果。

隨著CSS3的發展，動畫效果越來越豐富。但在實現動畫的過程中要注意性能，并適當使用硬件加速優化動畫效果，避免導致頁面卡頓。