[分享]css像qq侧滑删除

在移动端开发中，常常需要实现一些比较炫酷的交互效果。比如类似 QQ 侧滑删除的效果，当用户在列表中滑动某一项时，会出现删除按钮。这一效果可以通过 CSS 实现。首先需要在 HTML 结构中添加一个包含...

在移动端开发中，常常需要实现一些比较炫酷的交互效果。比如类似 QQ 侧滑删除的效果，当用户在列表中滑动某一项时，会出现删除按钮。

这一效果可以通过 CSS 实现。首先需要在 HTML 结构中添加一个包含文本和删除按钮的元素，然后通过 CSS 把元素的左侧隐藏，当用户滑动此元素时，将其左侧显示出来，同时隐藏右侧的其他元素。

/* HTML 结构 */
<div class="list-item">
  <p class="item-text">这是一项内容</p>
  <div class="delete-btn">删除</div>
</div>

/* CSS 样式 */
.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  overflow: hidden;
}

.list-item .item-text {
  flex: 1;
  padding-left: 20px;
}

.list-item .delete-btn {
  width: 70px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: red;
  color: #fff;
  transform: translateX(70px);
  transition: transform 0.3s ease-in-out;
}

.list-item:hover .delete-btn {
  transform: translateX(0);
}

.list-item:hover .item-text {
  color: #fff;
}

.list-item:not(:hover) .delete-btn {
  transform: translateX(70px);
}

.list-item:not(:hover) .item-text {
  color: #000;
} 

以上样式实现了当用户滑动某一项时，其左侧的删除按钮会显示出来，同时修改文本颜色和其他元素的隐藏状态，实现了类似 QQ 侧滑删除的效果。