通过css div 制作手机端 卡片左右滑动效果

要使用CSS创建一个手机端卡片左右滑动的效果，可以使用HTML结构，结合CSS动画和touch事件来实现。以下是一个简单的示例：

HTML:

<div class="container">
  <div class="card">
    <div class="card-content">
      <!-- 卡片内容 -->
      卡片内容
    </div>
  </div>
  <div class="card">
    <div class="card-content">
      <!-- 卡片内容 -->
      卡片内容
    </div>
  </div>
</div>

CSS:

.container {
  display: flex;
  overflow-x: auto; /* 使容器可滚动 */
  -webkit-overflow-scrolling: touch; /* 适用于移动设备的流畅滚动 */
}
 
.card {
  flex-shrink: 0; /* 防止卡片缩小以适应空间 */
  width: 300px; /* 卡片宽度 */
  margin-right: 10px; /* 卡片之间的间隔 */
  touch-action: pan-y; /* 允许仅垂直滚动 */
}
 
.card-content {
  padding: 20px; /* 卡片内填充 */
  text-align: center; /* 文本居中 */
  background-color: #fff; /* 卡片背景色 */
  border: 1px solid #ddd; /* 卡片边框 */
}

这段代码创建了一个容器，其中包含多个卡片。卡片可以通过左右滑动在手机端进行浏览。使用overflow-x: auto;和-webkit-overflow-scrolling: touch;可以在移动设备上提供流畅的滚动体验。

请注意，这只是一个基础示例，您可能需要根据实际需求进行样式调整和功能添加。