import "./App.css";

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

function App() {
  return (
    //使用兩個一摸一樣的文本效果，這樣更好蓋住
    //為了能重合使用絕對定位來處理
    <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%;
}

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