CSS中添加小動(dòng)圖的方法

在CSS中，我們可以使用@keyframes規(guī)則來創(chuàng)建動(dòng)畫，從而實(shí)現(xiàn)添加小動(dòng)圖的效果，下面是一個(gè)簡(jiǎn)單的示例：

1、在HTML中定義一個(gè)元素，例如一個(gè)div：

<div class="my-element"></div>

2、在CSS中定義動(dòng)畫：

@keyframes my-animation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}

在這個(gè)示例中，我們定義了一個(gè)名為my-animation的動(dòng)畫，它會(huì)在元素上水平移動(dòng)100像素。

3、將動(dòng)畫應(yīng)用到元素上：

.my-element {
  animation: my-animation 2s infinite;
}

在這個(gè)示例中，我們將my-animation動(dòng)畫應(yīng)用到.my-element元素上，動(dòng)畫會(huì)持續(xù)2秒并無限循環(huán)。

當(dāng)頁面加載時(shí)，.my-element元素就會(huì)開始播放my-animation動(dòng)畫，從而實(shí)現(xiàn)添加小動(dòng)圖的效果，這只是一個(gè)簡(jiǎn)單的示例，你可以根據(jù)自己的需求來定義更復(fù)雜的動(dòng)畫效果。