如何将颜色渐变添加到颤动中的卡片

要将颜色渐变添加到颤动中的卡片，你可以使用CSS和JavaScript来实现这一效果。下面是一个简单的示例，展示了如何创建一个颤动的卡片，并在其中添加颜色渐变效果。

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>颤动卡片颜色渐变</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="card"></div>
<script src="script.js"></script>
</body>
</html>

CSS样式

/* styles.css */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f0f0f0;
}

.card {
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  animation: shake 2s infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

JavaScript（可选）

如果你想要动态控制卡片的颤动效果或颜色渐变，可以使用JavaScript。

// script.js
document.querySelector('.card').addEventListener('mouseover', function() {
  this.style.animationPlayState = 'paused';
});

document.querySelector('.card').addEventListener('mouseout', function() {
  this.style.animationPlayState = 'running';
});