可更改容器背景颜色/颤动颜色的按钮

<button id="colorButton">更改颜色</button>
<div id="container">这是一个容器</div>

#container {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  transition: background-color 0.5s;
}

.shake {
  animation: shake 0.5s;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  50% { transform: translateX(10px); }
  75% { transform: translateX(-10px); }
  100% { transform: translateX(0); }
}

const colorButton = document.getElementById('colorButton');
const container = document.getElementById('container');

colorButton.addEventListener('click', () => {
  const randomColor = getRandomColor();
  container.style.backgroundColor = randomColor;
});

container.addEventListener('mouseover', () => {
  container.classList.add('shake');
});

container.addEventListener('animationend', () => {
  container.classList.remove('shake');
});

function getRandomColor() {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}