import "./App.css";

//基礎(chǔ)文本
const text = `
“再也不能罵人了！”近日，一條以“罵人也違法了
最高可判三年”為關(guān)鍵詞的話題登上熱搜，迅速引發(fā)公眾熱議。這背后，是自2026年1月1日起正式施行的新修訂《治安管理處罰法》，言語(yǔ)威脅、辱罵他人可能構(gòu)成違法！公然辱罵他人或捏造事實(shí)，造成重傷或死亡的還涉嫌犯罪。請(qǐng)謹(jǐn)言慎行，莫因“口無(wú)遮攔”承擔(dān)法律責(zé)任。
法律依據(jù) 《中華人民共和國(guó)治安管理處罰法》（2026），第五十條規(guī)定：
有下列行為之一的，處五日以下拘留或者一千元以下罰款；情節(jié)較重的，處五日以上十日以下拘留，可以并處一千元以下罰款：
（一）寫恐嚇信或者以其他方法威脅他人人身安全的；
（二）公然侮辱他人或者捏造事實(shí)誹謗他人的；
（三）捏造事實(shí)誣告陷害他人，企圖使他人受到刑事追究或受到治安管理處罰的；
（四）對(duì)證人及其近親屬進(jìn)行威脅、侮辱、毆打或者打擊報(bào)復(fù)的；
（五）多次發(fā)送淫穢、侮辱、恐嚇等信息或者采取滋擾、糾纏、跟蹤等方法，干擾他人正常生活的；
（六）偷窺、偷拍、竊聽(tīng)、散布他人隱私的。
有前款第五項(xiàng)規(guī)定的滋擾、糾纏、跟蹤行為的，除依照前款規(guī)定給予處罰外，經(jīng)公安機(jī)關(guān)負(fù)責(zé)人批準(zhǔn)，可以責(zé)令其一定期限內(nèi)禁止接觸被侵害人。對(duì)違反禁止接觸規(guī)定的，處五日以上十日以下拘留，可以并處一千元以下罰款。
《中華人民共和國(guó)刑法》第二百四十六條：
以暴力或者其他方法公然侮辱他人或者捏造事實(shí)誹謗他人，情節(jié)嚴(yán)重的，處三年以下有期徒刑、拘役、管制或者剝奪政治權(quán)利。
`;

function App() {
  return (
    //使用兩個(gè)一摸一樣的文本效果，這樣更好蓋住
    //為了能重合使用絕對(duì)定位來(lái)處理
    <p className="App">
      <p className="box">
        {text}
      </p>
      <p className="box">
        //不適用匿名盒子，是為了更好操作該行盒
        <span className="earser">{text}</span>
      </p>
    </p>
  );
}

.App {
  margin: 0;
  color: black;
  position: relative;
  display: block;
  color: #000;
}

.box {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

@property --per {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 5%;
}

//使用行盒子設(shè)置背景，才能達(dá)到我們想要的效果
.earser {
  --per: 5%;
  color: transparent;
  background: linear-gradient(to right, transparent var(--per), #fff calc(var(--per) + 100px));
  animation
  : earser 5s linear forwards;
}
//關(guān)鍵幀動(dòng)畫
@keyframes earser {
  to {
    --per: 100%;
  }
}