在CSS中設(shè)計圖片左右點動的效果，可以通過使用@keyframes規(guī)則來創(chuàng)建動畫，以下是一個簡單的示例，展示了如何設(shè)計圖片左右點動的動畫：

1、HTML結(jié)構(gòu)：

<div class="image-container">
  <img class="image" src="your-image-url-here" />
</div>

2、CSS樣式：

.image-container {
  position: relative;
  width: 200px; /* 你可以根據(jù)需要設(shè)置圖片的寬度 */
  height: 200px; /* 你可以根據(jù)需要設(shè)置圖片的高度 */
  overflow: hidden; /* 隱藏超出容器的部分 */
}
.image {
  position: absolute;
  width: 100%; /* 圖片寬度與容器寬度相同 */
  height: 100%; /* 圖片高度與容器高度相同 */
  animation: shake 1s infinite; /* 應(yīng)用動畫 */
}
@keyframes shake {
  0% { transform: translateX(0); } /* 初始位置 */
  50% { transform: translateX(10px); } /* 中間位置 */
  100% { transform: translateX(0); } /* 回到初始位置 */
}

在這個示例中，圖片在左右點動的效果是通過@keyframes規(guī)則創(chuàng)建的動畫實現(xiàn)的，動畫名為shake，持續(xù)時間為1秒，并設(shè)置為無限循環(huán)，在動畫過程中，圖片從初始位置（translateX(0)）移動到中間位置（translateX(10px)），然后再回到初始位置，通過調(diào)整translateX的值，你可以控制圖片的移動距離。