如何在颤动中显示容器上的随机图像

#image-container {
  width: 300px;
  height: 300px;
  overflow: hidden;
}

// 获取容器元素
var container = document.getElementById("image-container");

// 创建一个img元素
var image = document.createElement("img");

// 设置图像的src属性为随机图像的URL
image.src = "https://example.com/random-image.jpg";

// 设置图像的样式，使其填充容器并居中显示
image.style.width = "100%";
image.style.height = "100%";
image.style.objectFit = "cover";
image.style.objectPosition = "center";

// 将图像元素添加到容器中
container.appendChild(image);

// 使用CSS动画实现颤动效果
container.style.animation = "shake 0.5s infinite";

// 定义颤动动画的关键帧
var keyframes = `
@keyframes shake {
  0% { transform: translate(0, 0); }
  25% { transform: translate(5px, 5px); }
  50% { transform: translate(0, 0); }
  75% { transform: translate(-5px, -5px); }
  100% { transform: translate(0, 0); }
}
`;

// 创建一个style元素，并将关键帧添加到其中
var style = document.createElement("style");
style.innerHTML = keyframes;

// 将style元素添加到head中
document.head.appendChild(style);