CSS文字抖動如何放在盒子里面

在CSS中，我們可以通過使用動畫和變換（transform）來實(shí)現(xiàn)文字抖動的***，而要將這個***放在盒子里面，我們需要對盒子的樣式和位置進(jìn)行一定的設(shè)置。

我們需要創(chuàng)建一個盒子，這個盒子可以使用HTML的div元素來創(chuàng)建，然后給它一個類名或者ID，以便在CSS中定位它。

<div class="box"></div>

在CSS中，我們可以給這個盒子一個寬度、高度和背景顏色：

.box {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
}

我們需要在這個盒子里放入一些文字，可以使用***定位（position: absolute）將文字放在盒子的中心：

.box p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

我們需要給這段文字添加抖動的動畫，可以使用@keyframes規(guī)則來定義動畫，然后通過animation屬性來應(yīng)用動畫：

@keyframes shake {
  0% { transform: translate(0, 0); }
  2% { transform: translate(-10px, 0); }
  4% { transform: translate(10px, 0); }
  6% { transform: translate(-10px, 0); }
  8% { transform: translate(10px, 0); }
  10% { transform: translate(-10px, 0); }
  12% { transform: translate(10px, 0); }
  14% { transform: translate(-10px, 0); }
  16% { transform: translate(10px, 0); }
  18% { transform: translate(-10px, 0); }
  20% { transform: translate(10px, 0); }
  22% { transform: translate(-10px, 0); }
  24% { transform: translate(10px, 0); }
  26% { transform: translate(-10px, 0); }
  28% { transform: translate(10px, 0); }
  30% { transform: translate(-10px, 0); }
  32% { transform: translate(10px, 0); }
  34% { transform: translate(-10px, 0); }
  36% { transform: translate(10px, 0); }
  38% { transform: translate(-10px, 0); }
  40% { transform: translate(10px, 0); }
  42% { transform: translate(-10px, 0); }
  44% { transform: translate(10px, 0); }
  46% { transform: translate(-10px, 0); }
  48% { transform: translate(10px, 0); }
  50% { transform: translate(-10px, 0); }
  52% { transform: translate(10px, 0); }
  54% { transform: translate(-10px, 0); }
  56% { transform: translate(10px, 0); }
  58% { transform: translate(-10px, 0); }
  60% { transform: translate(10px, 0); }
  62% { transform: translate(-10px, 0); }
  64% { transform: translate(10px, 0); }
  66% { transform: translate(-10px, 0); }
  68% { transform: translate(10px, 0); }
  70% { transform: translate(-10px, 0); }
  72% { transform: translate(10px, 0); }
  74% { transform: translate(-10px, 0); }
  76% { transform: translate(10px, 0); }
  78% { transform: translate(-10px, 0); }
  80% { transform: translate(10px, 0); }
  82% { transform: translate(-10px, 0); }